How to make a div that on scroll down after a bit of space sticks to the top of the page

Question

I am trying to make my nav bar stick to the top of the page without using position fixed and only sticks after a set amount of space, say 500px. I have tried many different solutions but none of them work because I have a really weird nav.It also works for some reason in jsfiddle but not on my website.

Heres a jsfiddle of it.

CSS

#background {
  background: lightblue;
  background-position:center top;
}

p {
  font-size:15px; 
  padding-top:100px;
  padding-left:100px;
  padding-right:100px;
}

.rotate {
  float: left;
 -webkit-transform: rotate(180deg) 2s;
  transform: rotate(180deg) 2s;
  transition: all 2s ease;
  transition-delay: 0.4s;
}

.rotate:hover {
          -webkit-transform: rotateZ(-360deg);
          -ms-transform: rotateZ(-360deg);
          transform: rotateZ(-360deg);
}

.container {
    overflow: hidden;
    font-family: 'Roboto Condensed', sans-serif;
    position: static;
  z-index: 150;
  margin-bottom: -80px;
}

.container a {
    float: right;
    font-size: 20px;
    color: black;
    text-align: center;
    padding: 40px 70px;
    text-decoration: none;
        transition: background 1s;
}

.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 20px;
    border: none;
    outline: white;
    color: black;
    padding: 40px 70px;
    background-color: inherit;
    font-family: 'Roboto Condensed', sans-serif;
        transition: background 1s;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: lightgreen;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-right: 1px solid #bbb;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 18px;
}

.dropdown-content a:hover {
    background-color: #ddd;
    border-right: 1px solid #bbb;
}

.dropdown:hover .dropdown-content {
    display: block;
}

HTML

        <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo:200|Open+Sans:300|Quicksand|Roboto+Condensed|Shadows+Into+Light" rel="stylesheet">



    <div class="active">
    <div id="background">
  <div class="opacity">
  <div class="container">
  <div class="rotate">
  <img class="chiz" src="kkk.png" alt="Example">
</div>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  <a href="FAQ.html">FAQ</a>
  <a href="games.html">Games</a>
    <div class="dropdown">
      <button class="dropbtn" onclick="window.location.href='store.html'">Store</button>
      <div class="dropdown-content">
        <a href="wall.html">Example</a>
        <a href="store.html">Example</a>
      </div>
  </div>

</div>
</div> <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  <br><br>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
  </p>

jQuery

jQuery(function($) {
  function fixDiv() {
    var $cache = $('.container');
    if ($(window).scrollTop() > 0)
      $cache.css({
        'position': 'fixed',
        'top': '0px'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

Thanks, Any help appreciated :D

Since this requires JavaScript, where is the code you tried? — , Jul 13 '17 at 20:29
Here's a "working" fiddle. https://jsfiddle.net/khrismuc/pgw34wv1/ "none of them work" is not a useful problem description. What exactly is the issue? It looks like you mostly need to assign a `background-color` to the navigation. — , Jul 13 '17 at 20:40

Tyler Miller · Answer 1 · 2017-07-13T22:51:53.610

I'm going to assume that <div class="dropdown"> is your navbar.

Without using position fixed, you could get the top of your window using JS like this answer.

And then run the following function which listens for a window scroll event and then sets the navbar's top to match the window's top after you've scrolled a certain amount of pixels.

document.onscroll = () => {
  const navbar = document.getElementsByClassName('dropdown')[0];
  let top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

  if(top > 500) {
    navbar.style.top = top;
  } else {
    navbar.style.top = 0;
  }
};

I can't test this right now. So it may or may not work. Will update this after I test it.

How to make a div that on scroll down after a bit of space sticks to the top of the page

1 Answers1