jquery - 粘性导航不会在短页面上滚动

Question

我正在为一家花店开发一个网站，目前正在测试和完善它。一个长期存在的问题是导航栏，它应该在用户滚动经过它时粘在页面顶部。这在较长的页面上工作正常，但在屏幕分辨率较小且导航“溢出”超过页面滚动末尾的短页面上不起作用 - 当导航使用 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();
});

Answer 1

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