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

Question

当我滚动页面时，我很难让固定顶部导航栏更改背景颜色。

以下是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和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;
}

Answer 1

这样很容易,；

let blackToRed = [0,0,0,1];
$(document).ready(function(){
    $(document).scroll(function() {
        blackToRed[0] = window.scrollY;
        $("#item").css('color', 'rgba(' + blackToRed + ')');
    });
});

Answer 2

根据需要更改值50，50px是滚动后的页面位置

$(document).ready(function () {
                    $(window).scroll(function () {
                        if ($(window).scrollTop() >= 50) {
                            $(".navbar").css("background-color", "#222");
                        } else {
                            $(".navbar").css("background-color", "transparent");
                        }
                    });
                });

Answer 3

这是当前函数和css在具有的页面上所做的工作。

如果你让你的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>