滚动时没有触发的JQuery滚动

我使用下面的javascript来制作'粘性'导航，当用户滚动浏览它时，导航将固定到屏幕的顶部。这段代码工作正常，但是当元素变得粘滞并且元素的位置被设置为'fixed'时，身体中所有以下元素的位置'跳起来'以占据从改变元素所产生的间隙相对固定，并且会产生轻微的“颠簸”效果。为了解决这个问题，当元素改变为固定值时，我尝试在scroll y位置添加一个偏移量，但是这会通过再次触发滚动函数而导致一个循环，并且页面会滚动到页面的底部。滚动时没有触发的JQuery滚动

所以我的问题是 - 如何在下面的函数可以添加一个偏移量滚动位置？即，如何在$（window）.scroll函数中设置滚动位置，而不是将$（window）.scroll函数触发到循环中？

$(window).scroll(function (event) { 

    var y = $(this).scrollTop(); 

    var top = $('#main-navigation').offset().top; 

    if (y >= top) { 
     $('#navigation').addClass('fixed'); 
    } 
    else { 
     $('#navigation').removeClass('fixed'); 
    } 
});

任何帮助是非常赞赏

来源

2014-09-20 Tom Hadkiss

您可以添加'event.preventDefault（）'停止窗口的默认滚动行为的执行。另外，你可以做一个[小提琴]（http://jsfiddle.net），我们可以看到这个问题？ – Banana 2014-09-20 13:39:32

通用的解决方案

这里是为了防止环路的通用解决方案：

var lastScrollTop = 0; 
var defaultScrollHandler = function(e) 
{ 
    var y = $(this).scrollTop(); 

    //change event handlers  
    $(window).off("scroll", defaultScrollHandler); 
    $(window).on("scroll", tmpScrollHandler); 

    var jumpHeight = 200; 

    if(lastScrollTop > y) 
     jumpHeight *= -1; 

    var newY = y + jumpHeight; 

    $(window).scrollTop(y + jumpHeight); 
}; 

var tmpScrollHandler = function() 
{ 
    lastScrollTop = $(this).scrollTop(); 

    //change event handlers back 
    $(window).off("scroll", tmpScrollHandler); 
    $(window).on("scroll", defaultScrollHandler); 
}; 

$(window).on("scroll", defaultScrollHandler);

http://jsfiddle.net/udcwgyub/

设置之前新的滚动位置可以禁用当前事件处理程序并为滚动事件注册另一个处理程序。设置新的滚动位置后，其他处理程序将被调用。这个处理程序将禁用它自己并再次注册实际处理程序。

为你的情况

更好的解决方案，我认为你的情况，你可以更好地应该具有相同的高度作为导航一个虚设的元素取代静态导航。

var navOffset = $("nav").offset().top; 

$("#dummyNav").height($("nav").innerHeight()); 

$(window).scroll(function(){ 

    var y = $(this).scrollTop(); 

    var $nav = $("nav"); 
    var $dummyNav = $("#dummyNav"); 

    if(y >= navOffset) 
    { 
     if(!$nav.hasClass("fixed")) 
     { 
      $nav.addClass("fixed"); 
      $dummyNav.show(); 
     } 
    } 
    else if($nav.hasClass("fixed")) 
    { 
     $nav.removeClass("fixed"); 
     $dummyNav.hide(); 
    } 

});

http://jsfiddle.net/wdup394c/

来源

2014-09-20 14:57:56 PSanetra

滚动时没有触发的JQuery滚动

回答

相关问题