Javascript 代码在codepen和jsfiddle中工作

仅在向上滚动时显示标题的代码仅在或中有效。我在我的程序中编写了代码，但当我打开文件时它不起作用。我将所有代码粘贴到codepen和jsfiddle中，它成功了。我错过了什么，或者哪里出了错

HTML

JS

//向下滚动时隐藏标题
卷轴；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'header'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'header'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（'header'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
}
lastScrollTop=st；
}

---

另外，我已经多次将我所有的代码复制并粘贴到我自己的文档中的codepen和js fiddle中，以确保它们是正确的。（这与我的html、css、js文档中的代码相同。减去头部。）

看起来你可能正在添加

$（窗口）。在初始化jQuery之前滚动
侦听器。您还试图在jQuery初始化之前将navbarHeight设置为基于jQuery的值。尝试将依赖于jQuery的任何内容包装到jQuery onReady侦听器中：

// Hide Header on on scroll down
var didScroll, navbarHeight;
var lastScrollTop = 0;
var delta = 5;

$().ready(function(){
  navbarHeight = $('header').outerHeight();

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

$(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').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

//向下滚动时隐藏标题
var didScroll，导航条高度；
var lastScrollTop=0；
varδ=5；
$（）.ready（函数（））{
navbarHeight=$（'header'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
})
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'header'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（'header'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
}
lastScrollTop=st；
}

这将确保在jQuery初始化之后添加滚动侦听器
 在调用jquery js脚本之后，需要调用menu.js文件。
像这样：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="Scripts/menu.js"></script>



jQuery需要定义自己，然后menu.js才能理解jQuery库
您是否检查了浏览器控制台中的错误，以及当您说“我打开文件时它不工作”时，您的意思是在本地运行它？检查了控制台。3个错误：。如何修复它们？不，不起作用不，控制台仍然有这个错误：prntscr.com/e508g3Let-us。刚刚添加了这个。不起作用。但是控制台有这个错误：看起来第5行也依赖于jQuery的初始化。我更新了上面的答案来解释这一点。
// Hide Header on on scroll down
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').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

// Hide Header on on scroll down
var didScroll, navbarHeight;
var lastScrollTop = 0;
var delta = 5;

$().ready(function(){
  navbarHeight = $('header').outerHeight();

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

$(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').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="Scripts/menu.js"></script>