如何使我的導航欄從無陰影變為帶有滾動淡入淡出過渡的陰影？

Question

我希望我的導航欄在滾動時從無陰影變為陰影 - 完成（閱讀下面我的回答）。 現在我想為滾動陰影添加淡入淡出過渡效果。 閱讀下面的“更新”。

 $(document).ready(function() { // Transition effect for navbar $(window).scroll(function() { // checks if window is scrolled more than 500px, adds/removes solid class if($(this).scrollTop() > 500) { $('.topnav').addClass('shadow'); } else { $('.topnav').removeClass('shadow'); } }); });

 .logo { float: left; padding-left: 20px; padding-right: 15px; padding-bottom: 30px; padding-top: 20px; width: 210px; height: auto; } .topnav { overflow: hidden; background-color: white; top: 0; left: 0; margin: 0; padding: 0; z-index: 1000; width: 100%; !important; position: fixed; } .topnav.shadow { -webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25); -moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25); box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25); } .topnav a { float: left; display: block; color: grey; text-align: center; padding-top: 30px; padding-bottom: 0px; padding-left: 16px; padding-right: 16px; text-decoration: none; font-size: 18px; transition: color 0.3s ease-out; } .active, .nav-btn { color: #1a1a1a; } @media (max-width: 800px) { .resp-tn { padding-top: 60px; } .resp-bn { padding-bottom: 30px; } .logo { width: 130px; height: auto; } } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: grey; padding: 34px 16px; background-color: inherit; font-family: inherit; margin: 0; transition: color 0.3s ease-out; } .dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1001; } .dropdown-content a { float: none; color: grey; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover:not(.logo), .dropdown:hover .dropbtn { color: #1a1a1a; transition: color 0.5s ease; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 800px) { .topnav a:not(:first-child), .dropdown .dropbtn .resp-tn .resp-bn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 800px) { .topnav.responsive { position: fixed; } .topnav.responsive .icon { position: fixed; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } #active { color: #1a1a1a; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="topnav" id="myTopnav"> <img class="logo" src="[img path]"> <a href="/" id="active"><div class="resp-tn">Home</div></a> <a href="elements.html">Elements</a> <a href="about.html">About</a> <a href="contact.html"><div class="resp-bn">Contact</div></a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()"><i class="fal fa-bars"></i></a> </div>

我正在嘗試從頭開始學習如何編碼以及任何我不知道的東西，我通常只是搜索，但我真的找不到有效的解決方案，因此我的第一篇文章。

我真的很感激任何幫助:)

在我的控制台中發現錯誤：

未捕獲的 ReferenceError：$ 未在 main.js:14 中定義

第 14 行的代碼是$(document).ready(function() { — 我修復了這個問題

更新

我現在想為滾動陰影添加淡入淡出過渡。 這是用 CSS 實現的，還是必須用 JS 來備份？

Answer 1

 $(document).ready(function() { // Transition effect for navbar $(window).scroll(function() { // checks if window is scrolled more than 500px, adds/removes solid class if ($(this).scrollTop() > 50) { $('.topnav').addClass('shadow'); } else { $('.topnav').removeClass('shadow'); } }); });

 body { height: 200vh/* just for checking purpose */ } .logo { float: left; padding-left: 20px; padding-right: 15px; padding-bottom: 30px; padding-top: 20px; width: 210px; height: auto; } .topnav { overflow: hidden; background-color: white; top: 0; left: 0; margin: 0; padding: 0; z-index: 1000; width: 100%; position: fixed; } .topnav.shadow { -webkit-box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25); -moz-box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25); box-shadow: 0px 0px 9px 3px rgba(41, 41, 41, .25); } .topnav a { float: left; display: block; color: grey; text-align: center; padding-top: 30px; padding-bottom: 0px; padding-left: 16px; padding-right: 16px; text-decoration: none; font-size: 18px; transition: color 0.3s ease-out; } .active, .nav-btn { color: #1a1a1a; } @media (max-width: 800px) { .resp-tn { padding-top: 60px; } .resp-bn { padding-bottom: 30px; } .logo { width: 130px; height: auto; } } .topnav .icon { display: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: grey; padding: 34px 16px; background-color: inherit; font-family: inherit; margin: 0; transition: color 0.3s ease-out; } .dropdown-content { display: none; position: fixed; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1001; } .dropdown-content a { float: none; color: grey; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover:not(.logo), .dropdown:hover .dropbtn { color: #1a1a1a; transition: color 0.5s ease; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 800px) { .topnav a:not(:first-child), .dropdown .dropbtn .resp-tn .resp-bn { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 800px) { .topnav.responsive { position: fixed; } .topnav.responsive .icon { position: fixed; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } } #active { color: #1a1a1a; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="topnav" id="myTopnav"> <img class="logo" src="[img path]"> <a href="/" id="active"> <div class="resp-tn">Home</div> </a> <a href="elements.html">Elements</a> <a href="about.html">About</a> <a href="contact.html"> <div class="resp-bn">Contact</div> </a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()"><i class="fal fa-bars"></i></a> </div>

您的頁面窗口的內容較少。 如果您在 js 中提到的內容超過 500 像素，它將起作用。

Answer 2

問題是<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>在我的主要 .js 文件下面。 我只是把它移到上面。 這么簡單又愚蠢的錯誤！

對於我問題的第二部分——過渡——我添加了transition: 1s; 到.topnav

非常感謝大家的時間:)