在页面滚动上更改导航栏背景颜色

凯文·普赖斯

我background-color在滚动页面时无法更改固定的顶部导航栏。

这是JS中的函数：

$(document).ready(function(){       
    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    if (startchange.length){
        $(document).scroll(function() { 
            scroll_start = $(this).scrollTop();
            if(scroll_start > offset.top) {
                $(".navbar").css('background-color', '#f0f0f0');
            } else {
                $('.navbar').css('background-color', 'transparent');
            }
        });
    }
 });

这是一个名为“ custom.js”的文件，加载后位于页面底部bootstrap and jquery（custom.js与处于同一文件夹中index.html）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="custom.js"></script>

这是html导航栏：

<div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header ">                  
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div id="navbarNav" class="navbar-collapse collapse ">
                <br/><br/>
                <ul class="nav navbar-nav navbar-right ">
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">CALCULATORS</a></li>
                </ul>
            </div> 
        </div>
    </nav>
</div>

然后只有导航栏背景颜色更改的CSS：

.navbar {
    background-color: transparent;
    border-color: transparent;
}

.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
    background-color: transparent !important;
}

鞭子

这是您当前的函数和CSS在带有的页面上执行<div>的操作id=startchange。在页面加载时，导航栏不是透明的。滚动后，导航栏将立即变为透明（边框仍可见），一旦<div>withid=startchange通过页面顶部，导航栏将再次变为非透明。

如果使CSS更具体，则可以使导航栏透明，以无边框开头（在较大的屏幕尺寸下，您可能还想看看其在较小屏幕上的样式）。

$(document).ready(function(){       
    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    if (startchange.length){
        $(document).scroll(function() { 
            scroll_start = $(document).scrollTop();
            if(scroll_start > offset.top) {
                $(".navbar").css('background-color', '#f0f0f0');
            } else {
                $('.navbar').css('background-color', 'transparent');
            }
        });
    }
 });

.navbar.navbar-default.navbar-fixed-top {
    background-color: transparent;
    border-color: transparent;
    -webkit-transition: background-color 2s; /* Safari */
    transition: background-color 2s; 
}

.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
    background-color: transparent !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header ">                  
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div id="navbarNav" class="navbar-collapse collapse ">
                <br/><br/>
                <ul class="nav navbar-nav navbar-right ">
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">SERVICES</a></li>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">CALCULATORS</a></li>
                </ul>
            </div> 
        </div>
    </nav>
    
    <div id="page">
      Page Top
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <div id="startchange">Start Change Div</div>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      Page Bottom
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。