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

Question

我正在为花店开发一个网站，目前正在测试和改进它。一个长期存在的问题是导航栏，当用户滚过它时，它应该粘在页面的顶部。这在较长的页面上工作正常，但在屏幕分辨率较小且导航“溢出”超出页面末尾的短页面上滚动不起作用 - 当导航棒使用jQuery和位置时：固定页面跳回到一旦用户滚动过去，顶部。 （有关示例，请参阅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

Answer 2

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