javascript - Make navigation bar fixed after scroll

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(.jpg);
              background-position: center;
              padding: ;
              background-color: #fff;
              z-index: 1000;
          }

          .bg{
            height:2000px;
            background-color:#ff0;
            background-image:url(.jpg);
            position:relative;
            z-index: -9999;

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

          #featured {
            background: #E94F78 url(.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(.jpg);
           margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

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./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/images/stars-last.jpg);
            position:relative;
            z-index: -9999;

          }
          .bg1{
            background-image:url(http://alwayscreative/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./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./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;}

Share Improve this question edited Mar 18, 2013 at 16:17 asked Mar 18, 2013 at 3:02 Kadeem L 8635 gold badges17 silver badges30 bronze badges

hi i don't think what you want, done with css and html only maybe you need a jquery or javascript – jhunlio Commented Mar 18, 2013 at 5:39

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

This "sticky" behavior you are referring to has bee 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

You can do it something like this :

http://jsfiddle/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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Make navigation bar fixed after scroll - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)