粘性导航栏 onScroll？

Question

我目前正在为自己构建一个网站，我发现在导航栏位于图像下方的多个网站上，这种效果非常棒，但是当您滚动过去时，它会粘在顶部。

Example

我怎样才能做到这一点？另外，我怎样才能达到类似this website with a similar navbar style的效果？

Answer 1

这是@Matthew 所说的：

检查这个小提琴http://jsfiddle.net/luckmattos/yp8HK/1/

JQUERY

var num = 200; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

希望它有所帮助，我使用了引导导航栏。

Answer 2

这里有几个例子

在引导程序中，您可以使用navbar-fixed-top 类。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

查看以下链接：

固定到顶部：http://getbootstrap.com/components/#navbar-fixed-top

固定导航栏示例：http://getbootstrap.com/examples/navbar-fixed-top/

Answer 3

这是一个真实的 quick example 我用 jquery 和一些非常简单的 css 扔在一起。

JS

$(window).on('scroll', function(){
    if($(window).scrollTop()>=95 && !$('nav').hasClass('fixed')){
        $('nav').addClass('fixed'); 
    }
    else if($(window).scrollTop()<95 && $('nav').hasClass('fixed')){
       $('nav').removeClass('fixed') 
    }
});

CSS

.container {
  height: 1800px;
}

.header {
  text-align: center;
}

nav {
  background-color: #efefef;
  border-top: 2px solid #666;
  border-bottom: 2px solid #666;
  padding: 15px;
  width: 100%;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

HTML

<div class="container">
<div class="header">
  <img src="http://www.placehold.it/500x85" alt="" />
<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
</div>
</div>

Answer 4

这是一个动态高度获取的粘性导航栏 On-Scroll 示例

JS

您需要先添加一个 jQuery 库文件。

这是小提琴链接- https://jsfiddle.net/CV_pawan/4nr4codq/1/

$(document).ready(function(){
  var num = $(".header-class").offset().top; 
  $(window).bind('scroll', function() { 
    if ($(window).scrollTop() > num) {  
      $('.header-class').addClass('fixed');  
    } 
    else {  
     $('.header-class').removeClass('fixed');    
    } 
  });
});

CSS

body {
  margin: 0px;
  padding: 0px;
}

.nav-bar-white {
  background-color: #125456;
  width: 100%;
}

.active-2 {
  float: right;
  width: 49%;
  text-align: right;
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
}

h3 {
  color: #fff;
}

.first {
  background: #000;
  width: 49%;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  border: 1px solid #fff;
}

.first p {
  color: #fff;
}

.second {
  background: #000;
  width: 49%;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  border: 1px solid #fff;
}

.second p {
  color: #fff;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #300E06;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #000;
}

HTML

<ul class="nav-bar-white">
  <li class="active-1"><a href="#home">Company Logo</a></li>
</ul>

<ul class="header-class">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<div>
  <div class="first">
    <h3>
What is Lorem Ipsum?
</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </p>
  </div>
  <div class="second">
    <h3>
What is Lorem Ipsum?
</h3>
    <p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </p>
  </div>
</div>

<div class="first">
  <h3>
What is Lorem Ipsum?
</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
  </p>
</div>
<div class="second">
  <h3>
What is Lorem Ipsum?
</h3>
  <p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum
    </p>
  </p>
</div>
</div>

Answer 5

对于 jQuery 用户，请查看：

var yourNavigation = $(".nav");
    stickyDiv = "sticky";
    yourHeader = $('.header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > yourHeader ) {
    yourNavigation.addClass(stickyDiv);
  } else {
    yourNavigation.removeClass(stickyDiv);
  }
});

/* google font */


body {
  text-align:center;
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;
  color:rgba(0,0,0,0.87);
}

.header {
  width:100%;
  height:100px;
  font-size:50px;
  line-height:100px;
  text-transform:uppercase;
  font-weight:bold;
}

.nav {
  width:100%;
  height:60px; 
  font-size:20px;
  line-height:60px; 
  background:#ff5252;
  color:#fff;
  position:relative;
  margin-bottom:60px;
  z-index:3;
  text-transform:uppercase;
}

.content {
  width:640px;
  height:500vh;
  font-size:14px;
  padding-top:100px;
  margin:0 auto 0;
}

.sticky {
  position:fixed;
  top:0;
}

p {
  line-height:2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="sticky.js"></script>
<link rel="stylesheet" type="text/css" href="sticky.css">

<body>
    <header class='header'>Header</header>
    <div class='nav'>Navigation</div>
    <div class='content'>
        <h1>Simple sticky navigation bar</h1>
        <p>Using jQuery we add (or remove) a sticky class to the navigation bar. The sticky class fixes the position.
        </p>
        <p>This happens whenever the page is scrolled. We check to see how far down the page has scrolled, if this
            number is greater than the height of the header, we add the sticky class to the navigation.</p>
        <p>You can already achieve this effect using only CSS with <b>position: sticky;</b> but it's not supported by
            many browsers at the moment.</p>
    </div>
</body>

Answer 6

引导程序 5（2021 年更新）

Bootstrap 5 有一个sticky-top 类，可用于在页面滚动时创建静态到固定的导航栏效果。

Bootstrap 5 stick navbar after scrolling (simply sticky-top)
Bootstrap 5 stick navbar after scrolling (animate with IntersectionObserver)

引导程序 4（2018 年更新）

在 Bootstrap 4 中移除了 Affix 插件，因为 CSS position:sticky 完成了类似的行为。但是， position:sticky 不会动画导航栏样式的变化。为此，可以使用交叉点观察器。

See this question for Bootstrap 4 sticky navbar

Bootstrap 3（原始答案）

这是一个 Bootstrap 示例，一旦用户使用 Bootstrap 3 Affix 插件滚动到顶部标题，它就会将导航栏附加到顶部。

https://codeply.com/p/HAQSABYqPY