【问题标题】:Sticky NavBar onScroll?粘性导航栏 onScroll?
【发布时间】:2014-04-27 19:02:44
【问题描述】:

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

Example

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

【问题讨论】:

  • 使用javascript检查滚动位置和css定位。一旦用户滚动到或超过您希望导航栏粘在顶部的点,您可以使用 css position: fixed; 定位导航栏

标签: jquery html css twitter-bootstrap navbar


【解决方案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');
    }
});

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

【讨论】:

【解决方案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/

【讨论】:

    【解决方案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>
    

    【讨论】:

      【解决方案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>
      

      【讨论】:

        【解决方案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>

        【讨论】:

        • 请在您的答案中添加相关代码,如果链接断开,只有链接的答案将无用
        【解决方案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

        【讨论】:

        • 非常感谢您的链接! (:我喜欢动画版!我必须把它放到我的网站上!
        猜你喜欢
        • 2017-09-22
        • 2018-11-02
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-10-23
        相关资源
        最近更新 更多