Need some asisstance setting up html/css menu or js

Question

Hello I am trying to make a sticky menu that "sticks" to the top of the window after let say 150px . This is my secondary menu and I want it to stay on the place I want after the user scrolls past my header and nav bar, then to stick on the top of the window with the scroll.

I managed to make it sticky with this:

position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;

But i want the "stickiness" of the secondary menu to start past my header and nav bar.

hope you guys understand me correctly.

here is an example :

http://davist11.github.io/jQuery-Stickem/

I tried this plugin but it did not work for me and also I want the site to be only html css that is what the assignment is. Thanks

Answer 1

First, use

position: absolute;

and give it it's correct position. Then, you need jQuery.

$(document).scrollTop()

will tell you, how far you've scrolled.

$(window).scroll(function() {
  if ($(document).scrollTop() > 150) {
    $('#navbarthing').css({position: 'fixed', top: '0'});
  } else {
    $('#navbarthing').css({position: 'absolute', top: '150px'});
    //This is to make sure it resets if you sroll up again.
  }
});

You can seee it in action here: http://jsfiddle.net/b4YAr/1/

The thing is, in order for this to work, you have to include jQuery. Here is a starting guide: http://learn.jquery.com/about-jquery/how-jquery-works/ If you have some more time, I recommend the jQuery-course on codeacademy - http://www.codecademy.com/de/tracks/jquery

Best luck and best wishes.