3

我正在为花店开发一个网站，目前正在测试和完善它。一个长期存在的问题是导航栏，它应该在用户滚动过去时粘在页面顶部。这适用于较长的页面，但在屏幕分辨率较小且导航“溢出”超过页面滚动末尾的短页面上不起作用 - 当导航使用 jQuery 和 position:fixed 时，页面跳转回用户滚动过去后的顶部。（例如参见http://efbeta.nzrailphotos.co.nz/products/teddies/）。我该如何解决这个问题，以便：

  • 当页面内容短于导航栏时，导航栏无法修复
  • 导航栏在短页面上滚动
function sticky_relocate()
{
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top)
    $('nav').addClass('stick')
  else
    $('nav').removeClass('stick'); 
}
$(function()
{
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
4

2 回答 2

1

我认为名为 StickyJS 的 Jquery 插件可以帮助您：http ://stickyjs.com

于 2012-12-16T21:53:22.610 回答
0

您的最小页面高度需要至少与完全展开的导航栏一样高。尝试将#container 样式设置为最小高度。

于 2012-12-16T21:56:54.613 回答