當用戶向下滾動時，如何更改徽標並在固定標題的底部添加彩色邊框？

Question

網上有很多關於滾動頭效果的信息，我花了很多時間試圖自己解決這個問題。 我希望找到一種不使用 JS 的方法來做到這一點，但似乎沒有辦法。 我已經嘗試使用 JS 添加一個簡單的效果（在滾動時更改標題的高度）......希望一旦我得到標題來實際響應這個，我就可以使用它來制作我想要的效果。 但我什至無法讓標題做出回應。 最終，我希望標題的高度稍微降低，徽標將更改為不同的圖像，並且底部會添加一個 15 像素的彩色邊框。 我知道對於新手網頁設計師來說嘗試嘗試很多，但我真的很想弄清楚如何去做。 任何有關此方面良好在線資源的幫助或指導將不勝感激。

我只添加我的 html 和 css 只是為了讓事情不那么混亂。 如果需要，我可以在我的 js 文件中添加我嘗試過的內容。 我已經注釋掉了一些與 js 一起使用的 css，但這些 css 顯然不起作用。 在此先感謝您的時間。

 <header>
        <div id="nav">
            <div id="nav_left">
                <a href="index.html">HOME</a>
                <a href="services.html">SERVICES</a>
                <a href="portfolio.html">PORTFOLIO</a>
            </div>
            <a href="index.html" id="logo" class="noHover"><img src="images/logo_6_small.png" alt="Claire Crawford"
                    id="logo_Claire" /></a>
            <div id="nav_right">
                <a href="blog.html">BLOG</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">GET IN TOUCH</a>
            </div>
        </div>
    </header>

header {
  height: 160px;
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  /* border-bottom: 15px solid rgb(197, 179, 55) */
}

/* header border on scroll
header.fixed.scrolled .header_bottom .container_inner {
  border-bottom: 1px solid #0a0a0a;
} */

/* header.sticky {
  height: 120px;
} */

/* header {
  transition: padding 300ms ease;
} */

Answer 1

嘗試在您的實際代碼中使用此代碼。 它可能工作得很好

 $(function() { $(window).scroll(function() { if ($(this).scrollTop() > 200) { $('#logo img').attr('src', 'http://placehold.it/220?text=Original+Logo!'); $("#nav").css("border-bottom", "none"); } if ($(this).scrollTop() < 200) { $('#logo img').attr('src', 'https://cdn-images-1.medium.com/max/1600/1*4mdh6im57oFHSNY4syD_2Q.png'); $("#nav").css("border-bottom", "2px solid red"); } }) });

 header { height: 160px; position: fixed; top: 0; width: 100%; background: white; /* border-bottom: 15px solid rgb(197, 179, 55) */ } .wrapper { height: 1000px; } img { width: 100px; } #nav { width: 100%; display: flex; height: 110px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <header> <div id="nav"> <div id="nav_left"> <a href="index.html">HOME</a> <a href="services.html">SERVICES</a> <a href="portfolio.html">PORTFOLIO</a> </div> <a href="index.html" id="logo" class="noHover"><img src="https://cdn-images-1.medium.com/max/1600/1*4mdh6im57oFHSNY4syD_2Q.png" alt="Claire Crawford" id="logo_Claire" /></a> <div id="nav_right"> <a href="blog.html">BLOG</a> <a href="about.html">ABOUT</a> <a href="contact.html">GET IN TOUCH</a> </div> </div> </header> </div>

我一步一步告訴你： 1. 將此添加到您的 index.html 頁面。 您需要添加 jquery 才能使用此代碼。 <script src="code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 2.然后復制粘貼我的代碼到你的js文件中並根據需要進行編輯。
3.我寫了一個功能來滾動。 你可以看到我寫了 200，這樣如果你滾動 200px 下面的標志就會改變。 所以我寫了兩個條件

if ($(this).scrollTop() > 200) {
      $('#logo img').attr('src', 'http://placehold.it/220?text=Original+Logo!');
      $("#nav").css("border-bottom", "none");
    }

這個是在你滾動 200px 之后，另一個是你的初始階段。

3. $('#logo img').attr('src', 'http://placehold.it/220?text=Original+Logo!'); 這里#logo 是來自 html 的 id，而 img 是用於 logo div 中的 img。

4. $("#nav").css("border-bottom", "none"); nav 用於導航 div，我通過在此處添加 .css 來添加邊框 css