滚动后固定导航栏

Question

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

更新：我知道这不能通过 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”）实施，但是在现在和可预见的将来，不可能将其变为“粘性”元素”而不使用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像素后，它将更改滚动条的CSS。

这可能是一个好的开始

Answer 3

这个对我有用

window.addEventListener( 'scroll', function() {
  // if scroll down after 45px (position Y)
  if (window.scrollY > 45) {
    document.querySelector('nav').style.position = 'fixed'
    document.querySelector('nav').style.top = '0'
  } else {
    document.querySelector('nav').style.position='none'
  }
});