Js控制網頁鼠標滾動時，頂部導航條，由透明變成有背景色

本文轉載自查看原文 2020-09-16 16:11 752 Html 和 Css

<script type="text/javascript" src="./files-m/jquery-1.9.1.min.js"></script>
<script >
//網頁加載時運行
$(function(){

    navHeader();

    $(window).scroll(function () {
        navHeader();
    })

  function navHeader() {
        if ($(window).scrollTop() > 0) {
            $(".m_nav").addClass("light");
        } else {
            $(".m_nav").removeClass("light");
        }
    }

})
</script>



<style>
.light{background: rgba(255,255,255,.98);}
.m_nav{width:100%; height:50px;}
</style>



<html>

    <div class="m_nav">導航條</div>

</html>

效果：如果滾動了，且不在頂部位置了，則向導航條加一個背景的樣式。在頂部時沒有背景樣式，這樣它就是透明的了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uniapp 設置應用的狀態欄、導航條、標題、窗口背景色等 - globalStyle 當導航條滾動到頂部時固定到頂部小程序開發：四（window）全局設置小程序的狀態欄、導航條、標題、窗口背景色。如何設置背景色透明 js設置鼠標懸停改變背景色使用JS動態修改網頁body的背景色 android設置背景色為透明 CSS-透明背景色兼容 el-table背景色透明設置導航欄背景色為透明色的最有效做法