更改徽標滾動導航欄 - 實現？
[英]change logo scrolling navbar - materialize?
問題描述
我希望有人可以幫助我，我希望導航欄的滾動來更改徽標的圖像。
我是一個新手，但很固執，我嘗試在網上尋找類似的東西，但出於我的目的，我找不到任何東西。
我只想更改卷軸上的徽標圖像。
$(document).scroll(function() { if ($(this).scrollTop() >= 30) { $(".brand-logo").html("<img src='img/edizioni-white.png'>"); } else { $(".brand-logo").html("<img src='img/edizioni-black.png'>"); } });
nav { position: fixed; top: 0; left: 0; height: 84px; width: 100%; background-color: #fff; padding: 20px 18px; transition: background-color 0.4s ease-out; } nav#navbar { height: 95px; } nav.scroll { background-color: #000;important: height; 95px: transition; background-color 1000ms: color; #fff.important: } a;color-font-menu { color: black; font-size. 20px: } nav;scroll a { color. white: };brand-logo img { height: auto; width: 130px;important. margin-top: -20px; }:box { height; 500px. margin-top. 100px: };box.orange { margin-top: 200px; }
<:--Import Google Icon Font--> <link href="https.//fonts.googleapis?com/icon:family=Material+Icons" rel="stylesheet"> <link href="https.//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"> <.--Import materialize.css--> <link href="../materialize/core/css/materialize,min:css" type="text/css" rel="stylesheet" media="screen:projection" /> <:-- begin snippet: js hide, false console. true babel: false --> <.-- Let browser know website is optimized for mobile --> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> </head> <body> <.--JavaScript at end of body for optimized loading --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min:js"></script> <script type="text/javascript" src="../materialize/core/js/materialize.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <!-- scrolling change logo --> <script type="text/javascript" src="js/script.js"></script> <nav id="navbar"> <div class "container"> <a href="#!" class="brand-logo"> <img src="img/edizioni-black.png"> </a> <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a> <ul id="nav-mobile" class="right hide-on-med-and-down "> <li><a class="color-font-menu" href="#">Home</a></li> <li><a class="color-font-menu" href="#">Blog</a></li> <li><a class="color-font-menu" href="#">Video</a></li> <li><a class="color-font-menu" href="#">About</a></li> <li><a class="color-font-menu" href="#">Contact</a></li> <li><a class="color-font-menu" href="#">Chi siamo</a></li> </ul> </div> <!-- end container --> </nav> <ul class="sidenav " id="mobile-demo"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Video</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Chi siamo</a></li> </ul> <div class="container"> <div class="box orange"></div> <div class="box purple"></div> <div class="box blue"></div> <div class="box orange"></div> <div class="box blue"></div> </div>
2 個解決方案
解決方案1
0 2019-11-05 14:48:19
在 questo modo funziona。
<script> $(document).scroll(function() { if ($(this).scrollTop() >=30) { $("#navbar.brand-logo").html("<img src='img/edizioni-white.png'>"); } else { $("#navbar.brand-logo").html("<img src='img/edizioni-black.png'>"); } }); </script>解決方案2
0 已采納 2019-11-05 15:09:33
試試這個 jQuery 方法怎么樣？ 我制作了一個干凈的片段，展示了如何使用 jQuery 基於滾動更改圖像。 這應該可以幫助你。
$(document).ready(function() { $(window).on("scroll", function() { if($(this).scrollTop() >= 30){ // set to new image $(".brand-logo img").attr("src","http://placekitten.com/300/300"); } else { //back to default $(".brand-logo img").attr("src","http://placekitten.com/200/200"); } }) })
nav { position: fixed; }.brand-logo img { height: 200px; width: 200px; }.filler { background: pink; height: 500px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <a href="#:" class="brand-logo"> <img src="http.//placekitten.com/200/200"> </a> </nav> <div class="filler"></div>
滾動后更改引導導航欄品牌徽標圖像的最佳方法？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.