jQuery滚动而不触发滚动 [英] JQuery scroll without triggering on scroll

问题描述

我使用以下javascript进行粘性"导航，当用户滚动浏览时，它会将导航固定在屏幕顶部.该代码可以正常工作，尽管在将元素设置为粘性且元素的位置设置为固定"时，体内以下所有元素的位置跳起来"以占据因更改元素而产生的间隙.相对于固定，并产生轻微的震荡"效果.为了解决这个问题，我尝试在元素更改为固定值时向y滚动位置添加偏移量，但这会通过再次触发滚动功能而导致循环，并且页面会滚动到页面底部.

I use the following javascript to make a 'sticky' navigation, which makes the nav fixed to the top of the screen when the user has scrolled past it. This code works fine, although when the element is made sticky and the position of the element is set to 'fixed', the position of all of the following elements in the body 'jump up' to occupy the gap created from changing the element from relative to fixed, and makes a slight 'jolting' effect. To counter this, I have tried adding an offset to the scroll y position when the element is changed to fixed, but this causes a loop by triggering the scroll function again, and the page scrolls to the bottom of the page.

所以我的问题是-如何在下面的函数中向滚动位置添加偏移量?即，如何在$(window).scroll函数中设置滚动位置，不触发$(window).scroll函数进入循环?

So my question is - how in the function below can I add an offset to the scroll position? ie, how can I set the scroll position in the $(window).scroll function, without triggering the $(window).scroll function into a loop?

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

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

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

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

非常感谢您的帮助

推荐答案

常规解决方案

这是防止循环的一般解决方案:

Here is a general solution to prevent the loop:

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/

在设置新的滚动位置之前，您可以禁用当前事件处理程序并为滚动事件注册另一个处理程序.设置新的滚动位置后，将调用另一个处理程序.该处理程序将禁用自身并再次注册实际的处理程序.

Before you set the new scroll position you can disable the current event handler and register another handler for the scroll event. After you set the new scroll position the other handler will be called. This handler will disable itself and register the actual handler again.

为您的案件提供更好的解决方案

我认为在您的情况下，您最好用一个虚拟元素替换静态导航，该虚拟元素应具有与导航相同的高度.

I think in your case you could better replace the static navigation by a dummy element which should have the same height as the navigation.

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/

这篇关于jQuery滚动而不触发滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！