CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kadeem L
Kadeem L

Reputation: 863

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(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;}

Upvotes: 3

Views: 16298

Answers (3)

Mohamed
Mohamed

Reputation: 11

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

Upvotes: 0

Nileshd
Nileshd

Reputation: 21

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

Upvotes: 2

Amann Malik
Amann Malik

Reputation: 716

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

Upvotes: 2

Related Questions