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

问题描述

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

• 当页面内容短于导航栏时，导航栏无法修复


• navbar在短页面滚动

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屋！