滚动后固定导航栏

Question

I'm attempting to make the navigation bar stick to the top, when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar. The JSFIDDLE is here . Any help will be greatly appreciated.

Update: I understand that this can't be implemented through CSS & HTML. What would be the best way to implement this?

    <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>

& the 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

This "sticky" behavior you are referring to has become popular enough over the web that some people suggested it should be implemented as a CSS property like 'position: sticky' however right now and for the foreseeable future it is impossible to make a "sticky element" without the use of Javascript.

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

where in CSS .stuck {position: fixed;}

... something like that

Answer 2

You can do it something like this :

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');
    }
});

after scroll 50 px it will change the css of scroller.

this may be a good start

Answer 3

it works for me

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'
  }
});