使導航欄的固定渦旋盤

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屬性可以實現網絡人氣不足：粘「然而，現在和可預見的未來也不可能做出‘脫膠’，而不使用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;}

...類似的東西

Answer 2

你可以做這樣的事情：

http://jsfiddle.net/ux41b606

HTML：

<div id="image">Some image</div> 
<div id="scroller">Some controls</div> 

CSS：

body { 
    height: 3000px; 
    top: 0; 
} 
#image { 
    width: 100%; 
    background: #444; 
    height: 50px; 
} 
#scroller{ 
    height:100px; 
    background:#ccc; 
} 
.stuck{ 
    position:fixed; 
    z-index:100; 
    width:100%; 
    top:0; 
} 

的JavaScript：

$(window).scroll(function() { 
    if ($(window).scrollTop() > 50) { 
     $('#scroller').addClass('stuck'); 
    } else { 
     $('#scroller').removeClass('stuck'); 
    } 
}); 

後滾動50 PX它將改變滾輪的CSS。

這可能是一個良好的開端