向上滾動時導航欄不顯示

Question

參考此處的代碼段 ，每當用戶向上滾動時，我都試圖將導航顯示在頂部。 向下滾動時，導航欄可以照常消失，但向后滾動時，導航欄應該會顯示。

以下是代碼段：

 <script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/core.js"</script> <nav> <div class="container"> <a href="#" id="brand">Brand</a> <button> <span></span> <span></span> <span></span> </button> <ul class="navbar-menu"> <li><a href="#">Home</a></li> <li><a href="#">page a</a></li> <li><a href="#">page b</a></li> <li><a href="#">page c</a></li> <li><a href="#">page d</a></li> </ul> </div> </nav> 

 body { background: #eee; min-height: 3000px; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; } .add_menu{ background: red; } .container { width: 80%; margin: 0 auto; clear: both; } a { display: inline-block; color: #333; text-decoration: none; } nav { background: #fff; height: 80px; line-height: 80px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; width: 100%; z-index: 9998; transition: all 0.5s; } nav.scrollUp { transform: translateY(-80px); } nav ul.navbar-menu { margin: 0; padding: 0; display: inline-block; float: right; } nav ul.navbar-menu li { display: inline-block; margin: 0 10px; } nav ul.navbar-menu li a { color: #666; font-size: 14px; } nav a#brand { text-transform: uppercase; foat: left; font-weight: 800; font-size: 20px; } nav button { background: none; width: 30px; height: 40px; margin-top: 20px; border: none; float: right; display: inline-block; cursor: pointer; display: none; } nav button span { width: 30px; height: 40px; height: 2px; background: #333; display: block; margin: 5px 0; } @media (max-width: 768px) { nav ul.navbar-menu { display: none; } nav button { display: block; } } 

 $(document).ready(function () { var c, currentScrollTop = 0, navbar = $('nav'); $(window).scroll(function () { var a = $(window).scrollTop(); var b = navbar.height(); currentScrollTop = a; if (c < currentScrollTop && a > b + b) { navbar.addClass("scrollUp"); } else if (c > currentScrollTop && !(a <= b)) { navbar.removeClass("scrollUp"); } c = currentScrollTop; }); }); 

通過檢查器查看頁面時，出現未捕獲的參考錯誤：

Uncaught ReferenceError: $ is not defined

但是，如片段所示，我導入了jquery。

我怎樣才能解決這個問題？

Answer 1

我正在編輯您已修復的部分代碼，請檢查。

 $(document).ready(function () { var c, currentScrollTop = 0, navbar = $('nav'); $(window).scroll(function () { var a = $(window).scrollTop(); var b = navbar.height(); currentScrollTop = a; if (c < currentScrollTop && a > b + b) { navbar.addClass("scrollUp"); } else if (c > currentScrollTop && !(a <= b)) { navbar.removeClass("scrollUp"); } c = currentScrollTop; }); }); 

 body { background: #eee; min-height: 3000px; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; } .add_menu{ background: red; } .container { width: 80%; margin: 0 auto; clear: both; } a { display: inline-block; color: #333; text-decoration: none; } nav { background: #fff; height: 80px; line-height: 80px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; width: 100%; z-index: 9998; transition: all 0.5s; } nav.scrollUp { transform: translateY(-80px); } nav ul.navbar-menu { margin: 0; padding: 0; display: inline-block; float: right; } nav ul.navbar-menu li { display: inline-block; margin: 0 10px; } nav ul.navbar-menu li a { color: #666; font-size: 14px; } nav a#brand { text-transform: uppercase; foat: left; font-weight: 800; font-size: 20px; } nav button { background: none; width: 30px; height: 40px; margin-top: 20px; border: none; float: right; display: inline-block; cursor: pointer; display: none; } nav button span { width: 30px; height: 40px; height: 2px; background: #333; display: block; margin: 5px 0; } @media (max-width: 768px) { nav ul.navbar-menu { display: none; } nav button { display: block; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <div class="container"> <a href="#" id="brand">Brand</a> <button> <span></span> <span></span> <span></span> </button> <ul class="navbar-menu"> <li><a href="#">Home</a></li> <li><a href="#">page a</a></li> <li><a href="#">page b</a></li> <li><a href="#">page c</a></li> <li><a href="#">page d</a></li> </ul> </div> </nav>