Question

滚动页面时，我无法让固定的顶部导航栏更改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');
            }
        });
    }
 });

这是一个名为＆＃34; custom.js＆＃34;的文件。并在我加载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;
}

Answer 1

这是您当前的函数和css在<div>与id=startchange的网页上所做的事情。在页面加载时，导航栏不透明。滚动后，导航栏变为透明（边框仍然可见），一旦带有<div>的{{1}}越过页面顶部，导航栏将再次变为不透明。

如果你使你的css更具体，你可以让导航栏变得透明，无边框开始（在较大的屏幕尺寸下，你可能想看一下它的样式也适用于较小的屏幕）。

＆＃13;

id=startchange

＆＃13;

$(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');
            }
        });
    }
 });

＆＃13;

.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;
}

＆＃13;

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

这种方法很简单；

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

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

3 个答案: