问题：

滚动引导时更改导航栏背景[重复]

司马项明

2023-03-14

我试图让我的导航栏在滚动时从透明背景变为黑色背景。与此模板类似：https://www.templatemonsterpreview.com/demo/58900.html?_gl=1*vx82om*\uGA*MTC0odazmti4xNJI3NTCxNdQW*\uGA\uFTPyEGT5LY*MTYyNzYwNzQ4Mi40LjEuMTYyNzYwODA2NC40Nw。。

这是我的html：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Cuppela</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/popper.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
    <nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div class="container-fluid" id="top-main"> 

    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p style="font-size: x-large;">Delicious Homemade Cakes</p>
    </div>
    
</div>

<div id="best-sellers "class="container">
    <h2>Best Sellers</h2>
    <hr>
    <div id="best-seller-cakes" class="row">
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/chocolate_cake.jpg">
            <h4>Good<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/red_velvet_cake.jpeg">
            <h4>Awesome<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/strawberry_cake.jpg">
            <h4>Great<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="images/cake_seven.jpg">
            <h4>Delicious<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
    </div>
</div>

<footer>
    <div class="container-fluid" id="footer-content">
    <h3>Test</h3>
    </div>
</footer>

<script type="text/javascript">
$(document).ready(function(){
    $(window).on("scroll",function(){

        if($(document).scrollTop() > 50)
        {
            $("#nav-menu").css({background:"black"});
        }
        else
        {
            $("#nav-menu").css({background:"transparent"});
        }
    })
});
</script>

</body>
</html>

这是我的css：

body{
    margin: 0px;
}

li a:hover {
    background-color: #ff9900;
    border-radius: 10px;
}

li a{
    color: white !important;
}

.nav-link{
    padding: 0 0 .2rem
}

#top-main{
    background-image: url(../images/cake_six_two.jpg);
    height: 100vh;
}

#nav-menu{
    font-size: medium;
    position: relative;
}

#top_text{
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

h1{
    font-size: 500%;
    text-align: center;
}


h2{
    text-align: center;
}

#best-sellers{
    text-align: center;
}

#best-seller-cakes{
    text-align: center;
}

h4
{
    font-size: x-large;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

#footer-content
{
    text-align: center;
}

共有3个答案

罗淮晨

2023-03-14

用这种方式试试

我已将目标导航菜单更改为主导航

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

        if($(document).scrollTop() > 50)
        {
            $("#main-nav").css('background', 'black !important;');
        }
        else
        {
            $("#main-nav").css('background','transparent !important;'});
        }
    })
});

班浩皛

2023-03-14

好的，你可以使用引导。首先，您需要删除类bg transparent，因为它有！重要信息背景色：

以下是经过测试的工作解决方案：

(function($){
    $(window).on("scroll",function(){
        var $navbar = $('#main-nav');
        if($(document).scrollTop() > ($navbar.height()+10))
        {
            $navbar
                .removeClass('bg-transparent')
                .addClass('bg-dark');
        }
        else
        {
            $navbar
                .addClass('bg-transparent')
                .removeClass('bg-dark');
        }
    });
}(jQuery || window.jQuery));

通常，在滚动期间，我检查文档离屏幕顶部有多远。我取标题高度，并添加10px到它一些偏移。

当文档的位置大于标题（当我们向下滚动时），然后我删除透明背景并添加黑色背景。如果我向上滚动，我删除黑色背景，并恢复透明背景。

我只是在标题中自动添加和删除类。

孙宏扬

2023-03-14

通过jQuery在#主导航而不是#导航菜单上添加/删除类。

请参阅下面的运行片段。

$(document).ready(function () {
    $(window).on("scroll", function () {
        if ($(document).scrollTop() > 50) {
            $("#main-nav").addClass('bg-dark').removeClass('bg-transparent');
        }
        else {
            $("#main-nav").addClass('bg-transparent').removeClass('bg-dark');
        }
    })
});

li a:hover {
    background-color: #ff9900;
    border-radius: 10px;
}
li a{
    color: white !important;
}
.nav-link{
    padding: 0 0 .2rem
}
#top-main{
    background-image: url(https://i.stack.imgur.com/Z12tw.png);
    height: 100vh;
}
#nav-menu{
    font-size: medium;
    position: relative;
}
#top_text{
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}
h1{
    font-size: 500%;
    text-align: center;
}
h4{
    font-size: x-large;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" ></script>


<div id="nav-menu">
    <nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

<div class="container-fluid" id="top-main">
    <div id="top_text">
        <h1>Cuppela Made With Sugar</h1>
        <p style="font-size: x-large;">Delicious Homemade Cakes</p>
    </div>
</div>

<div id="best-sellers" class="container text-center">
    <h2>Best Sellers</h2>
    <hr>
    <div id="best-seller-cakes" class="row text-center">
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="https://i.stack.imgur.com/Z12tw.png" class="w-100">
            <h4>Good<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="https://i.stack.imgur.com/Z12tw.png" class="w-100">
            <h4>Awesome<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="https://i.stack.imgur.com/Z12tw.png" class="w-100">
            <h4>Great<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-3">
            <img src="https://i.stack.imgur.com/Z12tw.png" class="w-100">
            <h4>Delicious<br>Cakes</h4>
            <p>Delicious Cake with Awesome Goodness</p>
        </div>
    </div>
</div>

<footer>
    <div class="container-fluid text-center" id="footer-content">
        <h3>Test</h3>
    </div>
</footer>

类似资料：

滚动后更改导航栏背景色

我的导航栏有一个透明的背景，当用户向下滚动时，我想添加一个不同的背景。我使用了这个问题的代码：滚动后更改导航条颜色？我的代码现在如下所示：当我向下滚动时，一切正常，背景和不透明度适用，但当我向后滚动到顶部时，这种样式仍然存在。我希望它更改回没有背景的默认样式。谢啦
CSS滚动时更改导航栏背景颜色

我的导航栏有一个白色背景，但在登录页上它应该是透明的，当我向下滚动时它应该是白色的，在其他页面上它应该是白色的。我使用的代码来自：滚动后更改导航栏颜色？编辑：所以我在下面的答案中添加了一个小提琴，但不知何故它不起作用 https://jsfiddle.net/jy6njukm/ 这是我的代码： javascript: 这里是我的navbar css：我有我的导航栏html只有我的home
引导导航栏将颜色更改为滚动[重复]

我使用引导为一个主题，我看到了这个网站：http://www.luatix.org/en/，我喜欢navbar上的效果。向下滚动时更改颜色并更改元素的颜色。谢啦
在页面滚动中更改导航栏背景颜色

当我滚动页面时，我很难让固定顶部导航栏更改背景颜色。以下是JS中的函数：这是一个名为“”的文件，在我加载后加载到页面底部（与位于同一文件夹中）这里是html导航栏：然后，我只有css用于更改导航栏背景颜色：
滚动后更改导航栏颜色？

如何设置没有背景色的导航栏？当在div之后向下滚动导航条时，导航条会得到一个新的背景颜色（导航条应该固定在顶部，我在引导中使用）我尝试过一些教程，但没有成功。这是网站：http://attafothman.olympe.in/ 我说的是上面那个黑色导航条。
更改WordPress中滚动的导航菜单背景色

如何在默认情况下设置无背景色的导航栏并在滚动时获得背景色？当向下滚动带有类的div时，应该会获得新的bg颜色。对于顶部的固定位置，我使用来自Bootstrap3的。我几乎尝试了我遇到的每一个教程，但我没有成功。我甚至尝试从WordPress词缀插件，但没有运气。这是我的密码

滚动引导时更改导航栏背景[重复]

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档