使用JavaScript向上滚动时如何禁用菜单显示

Question

我正在为项目使用外部主题，但是在前端方面我不是很坚强。

它使用此JavaScript在滚动条上隐藏标题：

function HideShowHeader() {

        var didScroll;
        var lastScrollTop = 0;
        var delta = 80;
        var navbarHeight = 0;
        var navbarHideAfter = navbarHeight

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

        if( $('.scroll-hide').length > 0 ){

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

        }

        return false;

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

            if(Math.abs(lastScrollTop - st) <= delta)
                return;

            if (st > lastScrollTop && st > navbarHideAfter){
                if( $('.scroll-hide').length > 0 ){
                $('header').addClass('nav-hide');
                }
            } else {
                if( $('.scroll-hide').length > 0 ){
                if(st + $(window).height() < $(document).height()) {
                    $('header').removeClass('nav-hide');
                }
                }
            }

            lastScrollTop = st;
        }


}//End Hide Show Header

但是现在，当我向上滚动时，标题会重新出现。我不要这个我只希望标题在向下滚动时消失，而在向后滚动到顶部时再次出现。不只是在网页中间。

我如何修改此代码来做到这一点？

Answer 1

您可以通过在滚动和页面中间添加隐藏类来隐藏标题，而在返回顶部时可以删除隐藏类。下面是代码：

$(document).ready(function(){
		var scroll = $(window).scrollTop();
		if (scroll >= 100) 
			$("header").addClass("hide");
		 else 
			$("header").removeClass("hide");
		$(window).scroll(function() {
			var scroll = $(window).scrollTop();
			if (scroll >= 100) 
			    $("header").addClass("hide");
			else 
			    $("header").removeClass("hide");
		});
	});
 /*Here 100 is in px, set in px from where you want to hide your header.*/