粘性导航不会在短页面上滚动 [英] Sticky nav won't scroll on short pages

问题描述

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

I'm developing a site for a florist and am currently testing and refining it. A long-standing issue is with the navbar, which is supposed to stick to the top of the page when the user scrolls past it. This works fine on longer pages, but on short pages where the screen resolution is small and the nav "spills" past the end of the page scrolling doesn't work - when the nav sticks using jQuery and position: fixed the page jumps back to the top once the user scrolls past. (For an example see http://efbeta.nzrailphotos.co.nz/products/teddies/). How can I fix this so that either:

• 当页面内容比导航栏短时导航栏无法修复
• 导航栏在短页面上滚动

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();
});

推荐答案

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

I think that the Jquery plugin called StickyJS can help you : http://stickyjs.com

这篇关于粘性导航不会在短页面上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！