Question

我在bootstrap项目上有一个固定的导航栏，在网站的登录页面上，我已经使导航栏的背景透明。当网站向下滚动时，我希望导航栏背景变回黑色。我正在使用bootstrap。我想要的一个例子可以在nabber中看到：

http://ironsummitmedia.github.io/startbootstrap-agency/

我是一名新编码员，所以我为代码格式中的任何错误道歉。

HTML：

<!DOCTYPE html>


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Youth  |  Society</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="design.css" rel="stylesheet">

    <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
    </head>


<body>
    <header>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">

          <a href="#" class="navbar-brand"><img src="1.png"></a>
          </div>


          <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>


          </button>

          <div class="collapse navbar-collapse navHeaderCollapse">

              <ul class="nav navbar-nav navbar-right">

          <li><a href="#">Home</a></li>
          <li><a href="#">Who are we</a></li>
          <li><a href="#">Volunteer</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

          </div>
         </div>
    </div>
        </header>


    <div class="page1"> 
    <div class="landing">
      <div class="container">
        <h1>Peel's YES</h1>
        <p>Welcome To Peel's Youth Engagement Society</p>
      </div>
<div class="topics">
      <div>
        <div class="row">
          <div class="col-md-4">
            <h3>Learn</h3>
            <p>Get to know more about YES, who we are, and what we do.</p>

          </div>
          <div class="col-md-4">
            <h3>Volunteer</h3>
            <p>Find out how you can get involved! YES strives to prove YOUth with unique opportunities and experiences.</p>

          </div>
          <div class="col-md-4">
            <h3>Educate</h3>
            <p>Read about the themes that YES has supported in the past</p>

          </div>
        </div>
      </div>
    </div>
    </div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

</body>

</DOCTYPE>

CSS：

.navbar-header {
    display: inline;
}

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

@media screen and (max-width: 767px) {
    .navbar {
        background-color: black;

    }
}


.navbar-toggle{
    margin-top: -50px;


}

.navbar .nav > li > a {
    color:  black;
}

@media screen and (max-width: 767px) {
    .navbar .nav > li > a {
        color:white;

    }
}
.navbar {

    padding-top:15px;
    padding-bottom: 5px;

}

@media screen and (max-width: 767px) {
    .navbar {
        padding-top:0px;
        padding-bottom: 0px;

    }
}

.navbar a {

  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;  
}

.navbar li{

    font-family: 'Lato', sans-serif;
    display: inline;

}

.navbar img {
    max-height: 50px;
    margin-top: -20px;

}


/*      P A G E  1      */




.landing {
    padding-top:140px;
    background-image:url(mainpage1.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 760px;
}

.landing h1 {
    text-align: center;
  color: #000;
  font-size: 70px;  
  font-family: 'Lato', sans-serif;
  font-weight: bold;
}

.landing p {
    text-align: center;
  font-size: 20px;
  color: #000;
    font-family: 'Lato', sans-serif;
}
.topics{

    background: #eeeeee;
    padding-right:40px;
    margin-top: 340px;
    text-align: center;
}

.topics h3{
    font-size: 18px;
}

.topics p{
    font-size: 18px;
}


/*      P A G E  2      */


.page2 {
    height:760px;

}

.page2 h3{
    text-align: left;
    margin-top: 100px;

}

Answer 1

以下是 Fiddle 。

我做了一个改变，如果这对你有帮助，导航的阴影颜色也会显示在较小的屏幕上。

如果您遇到此帖并查看小提琴，请确保使视图框架更大。

此导航栏效果适用于大屏幕。（768 px Plus） Large view FIDDLE here.

您可以在此处从顶部滚动时更改效果。

var docElem = document.documentElement,
    header = document.querySelector( '.navbar-default' ),
    didScroll = false,
    changeHeaderOn = 200;

这里改变背景颜色

.navbar-default.navbar-shrink {
padding: 10px 0;
background-color: #222567;
background: rgba(70,10,200,0.9);

这里首先设置背景颜色。

@media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
/*  background-color: transparent; */
background: rgba(70,10,200,0.4);
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}

Answer 2

有许多脚本用于在滚动上制作动画。老实说，这真的取决于你想做什么。这是一个显示基础知识的jQuery脚本。一旦访问者滚过某个点，它就会向navbar（或任何你想要的）添加一个类。在类中，在这种情况下shrink，我通常会将转换缓动添加到类中，这样可以在添加/删除类时很好地转换。

$(window).scroll(function() {
    if ($(this).scrollTop() > 200){ // Set position from top to add class
        $('.navbar').addClass("shrink");
    } else {
        $('.navbar').removeClass("shrink");
    }
});

如何在页面向下滚动后更改导航栏背景颜色

2 个答案: