如何使用滾動條更改導航欄背景？

Question

我是Web開發的新手。 對於我的一個項目，我想在用戶滾動時更改導航欄的背景。 我希望它看起來像這樣： https : //www.nlogic.co/understanding-vlan-hopping-attacks/

這是我的代碼：

 nav .row { margin-right: 0px; } nav { border: 2px ridge #999; position: fixed; } nav li { float: left; list-style: none; padding: 20px 30px; } nav a { color: white; font-size: 20px; } .btn button { background-color: transparent; color: white; margin: 10px 30px; padding: 10px 25px; border: 2px solid #999; border-radius: 5px; } .btn button:hover { border: 2px solid white; border-radius: 10px; }

 <nav class="col-md-12"> <div class="row"> <ul class="col-md-8"> <li><a href="#">About</a> </li> <li><a href="#">Contact</a> </li> <div class="clearfix"></div> </ul> <div class="btn col-md-4"> <button>Sign Up</button> <button>Sign In</button> </div> </div> </nav>

我不擅長jQuery。 實際上，我只了解Javascript的基礎知識。 如果有人可以在這里幫助我，我將非常感謝。

Answer 1

嘗試這個：

$(document).ready(function(){

    $(window).on("scroll",function(){

        if($(document).scrollTop() > 150)
            $(".col-md-12").css({backgroundColor:"gray",position:"fixed"});


        else
             $(".col-md-12").css({backgroundColor:"transparent",position:"absolute"});


    })

})

最終代碼：

 <!DOCTYPE html> <html lang="en"> <head> <style> body { height: 1500px; } nav .row{ margin-right: 0px; } nav{ border: 2px ridge #999; position:absolute; } nav li{ float: left; list-style: none; padding: 20px 30px; } nav a{ color:white; font-size: 20px; } .btn button{ background-color: transparent; color: white; margin: 10px 30px; padding: 10px 25px; border: 2px solid #999; border-radius: 5px; } .btn button:hover{ border: 2px solid white; border-radius: 10px; } </style> </head> <body> <nav class="col-md-12"> <div class="row"> <ul class="col-md-8"> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <div class="clearfix"></div> </ul> <div class="btn col-md-4"> <button>Sign Up</button> <button>Sign In</button> </div> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(window).on("scroll",function(){ if($(document).scrollTop() > 150) $(".col-md-12").css({backgroundColor:"gray",position:"fixed"}); else $(".col-md-12").css({backgroundColor:"transparent",position:"absolute"}); }) }) </script> </body> </html>

Answer 2

嘗試這個。 根據需要更改sizes 。 請參考此示例並為您的project實施它。

 <html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style type="text/css"> body{ height: 1000px; margin: 0; padding: 0; } div.navbar{ width: 100%; height: 100px; background-color: black; position: fixed; } </style> <body> <div class="navbar"></div> </body> <script type="text/javascript"> $(window).scroll(function(){ var thescroll = $('body').scrollTop(); //alert(thescroll); //in here, get the scroll position, if it is greater than you navbar height then change the color or whatever. if (thescroll > 80) { $("div.navbar").css({"background-color":"pink"}); } else { $("div.navbar").css({"background-color":"black"}); } }); </script> </html>

如何使用滾動條更改導航欄背景？

問題描述

2 個解決方案

解決方案1
2 已采納 2016-09-10 08:01:00

解決方案2
1 2016-09-10 08:02:59

如何使用滾動條更改導航欄背景？

問題描述

2 個解決方案

解決方案1 2 已采納 2016-09-10 08:01:00

解決方案2 1 2016-09-10 08:02:59

解決方案1
2 已采納 2016-09-10 08:01:00

解決方案2
1 2016-09-10 08:02:59