Question

我打算在打开主页时将顶层菜单导航栏设置为透明，当它们开始向下滚动时，会有background color个。

这是我的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target="#my-navbar">

  <!-- Navbar -->
  <nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" id="my-navbar" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="" class="navbar-brand">Health&Wellness</a>
      </div>
      <!-- Navbar Header-->

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#health_product">Health Product</a>
          </li>
          <li><a href="#blog">Blog</a>
          </li>
          <li><a href="#slim_product">Slim Product</a>
          </li>
          <li><a href="#video">Video</a>
          </li>
          <li><a href="#skin_product">Skin Product</a>
          </li>
          <li><a href="#contact_us">Contact us</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- End Container-->
  </nav>
  <!-- End navbar-->
</body>

Answer 1

你需要JS来做那件事

＆＃13;

$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

＆＃13;

.navbar-custom.top-nav-collapse {
  background: black;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target="#my-navbar">

  <!-- Navbar -->
  <nav class="navbar navbar-custom navbar-fixed-top" id="my-navbar" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="" class="navbar-brand">Health&Wellness</a>
      </div>
      <!-- Navbar Header-->

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#health_product">Health Product</a>
          </li>
          <li><a href="#blog">Blog</a>
          </li>
          <li><a href="#slim_product">Slim Product</a>
          </li>
          <li><a href="#video">Video</a>
          </li>
          <li><a href="#skin_product">Skin Product</a>
          </li>
          <li><a href="#contact_us">Contact us</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- End Container-->
  </nav>
  <!-- End navbar-->
  <div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo mollis ipsum, id scelerisque enim imperdiet vitae. Proin consectetur eleifend elit at ullamcorper. Vivamus ante purus, auctor sit amet viverra id, mattis sed enim. Aliquam bibendum dignissim odio quis pulvinar. Cras ultricies orci est. Pellentesque vitae tellus ante. Phasellus vitae lacus vitae diam euismod rhoncus nec nec risus. Donec sagittis vel sapien et suscipit. Quisque tempus justo id vulputate ultricies. Maecenas libero neque, efficitur volutpat aliquam dignissim, pellentesque non orci. Donec vulputate tincidunt tellus, feugiat eleifend ex molestie eu. Proin at odio et est suscipit ultrices quis id orci. Vestibulum ac hendrerit est. Ut ante nisi, vehicula a tristique et, ultricies vitae augue.

Proin in dolor a ex auctor posuere. Donec commodo ornare orci, eu tempus ante pulvinar non. Aenean mauris neque, malesuada sit amet mi in, cursus accumsan nisi. Duis ullamcorper gravida tortor, sit amet tempus ex imperdiet id. Pellentesque eget elit vel ex tempus luctus et id sapien. Fusce massa augue, pharetra vel dictum nec, lobortis eu neque. Nunc condimentum tempus imperdiet. Nullam in elit et dolor lobortis pretium vitae in odio. Nullam id ornare justo.

Proin eget varius est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla lectus elit, imperdiet id pulvinar a, ullamcorper id est. Nunc pharetra tincidunt ex, a luctus elit eleifend eget. Cras euismod gravida urna sed gravida. Morbi bibendum, nibh vitae rutrum finibus, est nibh tincidunt augue, eu dignissim neque enim iaculis urna. Ut quis tortor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Quisque pharetra efficitur libero, eu tincidunt magna. In hac habitasse platea dictumst. Proin eget laoreet mi. Donec rutrum lectus sit amet leo faucibus tincidunt. Suspendisse potenti. Sed vehicula vitae leo nec cursus. In quam nibh, blandit at ante et, aliquet interdum lacus. Donec id varius libero, sollicitudin elementum orci. Suspendisse viverra suscipit ligula a suscipit.

Fusce sit amet metus gravida, mollis metus quis, consectetur erat. Aliquam rhoncus semper hendrerit. Vivamus vitae lectus diam. Suspendisse sit amet lacinia arcu. Donec tempus semper dolor eget lacinia. Cras eleifend aliquam accumsan. Duis nec nisi pellentesque, iaculis tortor eu, laoreet velit. Nam non diam semper, iaculis risus lobortis, tristique leo. Sed et elit non mi sollicitudin suscipit ut in tortor. </div>
</body>

＆＃13;

Answer 2

您可以使用jQuery

添加/切换类

$(window).scroll(function() {
    $(element).toggleClass('scroll-effect', $(window).scrollTop() > 0);
});

然后设计它。

Answer 3

它被称为固定标题：
你可以查看这个演示：

Creating properties on demand (a.k.a. dynamic properties) has been deprecated and is scheduled to be removed in Gradle 2.0. Please read http://gradle.org/docs/current/dsl/org.gradle.api.plugins.ExtraPropertiesExtension.html for information on the replacement for dynamic properties.
Deprecated dynamic property: "extProgram" on "root project 'appController'", value: "{}".
2.0.193
[buildinfo] Not using buildInfo properties file for this build.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/Documents/codebase/app-controller/build.gradle' line: 54

* What went wrong:
A problem occurred evaluating root project 'appConroller'.
> Could not find method $() for arguments [build_5vi6ltfrgdviipcvtfu5rthgs1$_run_closure3_closure22_closure23@411109d] on root project 'appController'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 9.972 secs

$(window).scroll(function () {
     var sc = $(window).scrollTop()
    if (sc > 100) {
        $("#header-sroll").addClass("small")
    } else {
        $("#header-sroll").removeClass("small")
    }
});

.header {
    height:800px;
   
}

#header-sroll {
    position:fixed;
    height: 100px;
    background:#ccc;
    left:0;
    top:0;
    float:left;
    width:100%;
    -ms-transition:     all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}
#header-sroll h1 {
    font-size: 30px;
    font-family: Arial;
    text-align: center;
    line-height: 50px;
     -ms-transition:     all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}
#header-sroll.small {
    height: 70px;
    line-height: 35px;
}
#header-sroll.small h1{
    height: 70px;
    line-height: 35px;
    font-size: 25px;
}

Bootstrap 3菜单导航栏随着向下滚动而改变颜色

3 个答案: