javascript - 滚动后固定导航栏

Question

当用户向下滚动到导航栏时，我试图让导航栏粘在顶部，然后当用户向上滚动到导航栏时取消粘住。 JSFIDDLE is here .任何帮助将不胜感激。

更新:我知道这不能通过 CSS 和 HTML 实现。实现这一点的最佳方式是什么？

    <section class="main">
     <div id="wrap">

            <div id="featured">
         <div class="wrap">      
      <div class="textwidget">
        <div class="cup"><img src="#""></div>
    <div id="header"></div></div></div></div></div></div></div>
    <div class="whiteboard">
             <h1><a href="#">HELLO GUYS</a></h1>


        </div>
    </div>
 <div class="bg1"> <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>

& CSS

          .main{text-align:center;}

          h1{
              -webkit-font-smoothing: antialiased;
                  display:inline-block;
                font: 800 1.313em "proxima-nova",sans-serif; 
                padding: 10px 10px;
                margin: 20px 20px;
                letter-spacing: 8px;
                text-transform: uppercase;
                  font-size:3.125em;
                  text-align: center; 
                  max-width: 606px;
          line-height: 1.45em;
          position: scroll;
              background-color:#e94f78;
              text-decoration: none;
              color:yellow;
              background-image:url;
          }

          h1 a{
            text-decoration: none;
            color:yellow;
                    padding-left: 0.15em;
          }

          h2{
              -webkit-font-smoothing: antialiased;
                  display:inline-block;
                font: 800 1.313em "proxima-nova",sans-serif; 
                letter-spacing: 8px;
                margin-top: 100px;
                text-transform: uppercase;
                  font-size:3.125em;
                  text-align: center; 
          line-height: 1.45em;
          position: scroll;
              text-decoration: none;
              color:white;
              z-index: -9999;
          }

          h2 a{
            text-decoration: none;
            color:white;
                    padding-left: 0.15em;
          }

          h5{

          position: absolute;
                  font-family:sans-serif; 
                  font-weight:bold; 
                  font-size:40px; 
                  text-align: center; 
                  float: right;
                  background-color:#fff;
                  margin-top: -80px;
                  margin-left: 280px;
          }

          h5 a{

            text-decoration: none;
            color:red;
          }

          h5 a:hover{

            color:yellow;
          }

          #text1{
              -webkit-font-smoothing: antialiased;
                  display:inline-block;
                font: 800 1.313em "proxima-nova",sans-serif; 
                margin: 20px 20px;
                letter-spacing: 8px;
                text-transform: uppercase;
                  font-size:3.125em;
                  text-align: center; 
                  max-width: 606px;
          line-height: 1.45em;
          position: scroll;
              background-color:#E94F78;

          }

          #text1 a{
              color:yellow;
              text-decoration: none;
                  padding-left: 0.15em;


          }

          #text1 a:hover{

              text-decoration: none;
              cursor:pointer;
          }

          .whiteboard{
              background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
              background-position: center;
              padding: ;
              background-color: #fff;
              z-index: 1000;
          }

          .bg{
            height:2000px;
            background-color:#ff0;
            background-image:url(http://alwayscreative.net/images/stars-last.jpg);
            position:relative;
            z-index: -9999;

          }
          .bg1{
            background-image:url(http://alwayscreative.net/images/stars-last.jpg);
            z-index: -9999;
            height:1000px;
          }
          /* Header */
          #wrap {
            margin: 0 auto;
            padding: 0;
            width: 100%;
          }

          #featured {
            background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
            background-size: 385px 465px;
            color: #fff;
            height: 535px;
            overflow: hidden;
            position: relative;
            z-index: -2;
          }


          #featured .wrap {
            overflow: hidden;
            clear: both;
            padding: 70px 0 30px;
            position: fixed;
            z-index: -1;
            width: 100%;
          }


          #featured .wrap .widget {
            width: 80%;
            max-width: 1040px;
            margin: 0 auto;
          }

          #featured h1,
          #featured h3,
          #featured p {
            color: yellow;
            text-shadow: none;
          }

          #featured h4{
            color:white;
            text-shadow:none;
          }

          #featured h4 {
            margin: 0 0 30px;
          }

          #featured h3 {
            font-family: 'proxima-nova-sc-osf', arial, serif;
            font-weight: 600;
            letter-spacing: 3px;
          }

          #featured h1 {
            margin: 0;
          }

          .textwidget{
            padding: 0;
          }

          .cup{
            margin-top:210px;
            z-index: 999999;
          }

          .container{font-size:14px; margin:0 auto; width:960px}
          .test_content{margin:10px 0;}
          .scroller_anchor{height:0px; margin:0; padding:0;background-image:url()}
          .scroller{background:#FFF;
            background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
           margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

Answer 1

您所指的这种“粘性”行为在网络上已经非常流行，以至于有人建议将其实现为 CSS 属性，例如“position: sticky”，但是现在和可预见的 future 都不可能实现不使用 Javascript 的“粘性元素”。

var element = document.getElementById('navBar')
window.addEventListener('scroll', function() {
     element.getBoundingClientRect().top < 0 ? 
     element.classList.add('stuck') : 
     element.classList.remove('stuck');
});

在 CSS .stuck {position: fixed;} 中的位置

...类似的东西