Question

我在点击div "ego"时尝试停止某个功能。该功能根据滚动的位置显示或隐藏header，并且仅在默认情况下有效。

这是我的代码：

$("#ego").click(function(e){
    var $this = $(this);
    if($this.data('clicked', false)){
        hasScrolled();
    }
    e.stopPropagation();
});

var didScroll;
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = $('header').outerHeight();

    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();

        // Make sure they scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;

        // If they scrolled down and are past the navbar, add class .nav-up.
        // This is necessary so you never see what is "behind" the navbar.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
            $('header').animate({top:"-178px"}, 200, 'easeOutCubic');
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
             $('header').animate({top:"0px"}, 200, 'easeOutCubic');
            }
        }

        lastScrollTop = st;
    }

这是小提琴：

https://jsfiddle.net/antoniobarcos/wL2vuv4h/2/

有什么想法吗？

Answer 1

所以，如果我找到你，你想要停止在点击某个div时将导航栏隐藏在顶部：

您可以通过点击按钮添加一个类#ego stopNavigation来实现此目的。您还需要调整设置标题if位置的top子句：

    $("#ego").click(function(e){
        var $this = $(this);
        $this.toggleClass('stopNavigation');
    });

和

        if (st > lastScrollTop && st > navbarHeight && !$('#ego').hasClass('stopNavigation')){
            // Scroll Down
            $('header').animate({top:"-178px"}, 200);
        }

我更新了你的小提琴以获取更多信息！我希望这是你想要实现的目标：https://jsfiddle.net/wL2vuv4h/3/

单击div时停止功能

1 个答案: