How to create submenu HTML?

How can I create a sticky submenu like mailchimp or campaign monitor?

• ... So when you scroll; the submenu rises to the top and shows always. I just cant figure it out!

• Answer:

  For the fixed positioning, you would use something like this: #sticky{ position: fixed; //fixes the container to a specific place top: 25%; //one quarter of the page from the top } To change that as you scroll, you could do something like this (using jQuery here): $(window).on("scroll", function(){ var $sticky = $("#sticky"); var scrollVar = $(this).scrollTop(); //gives you the scrollY position on the page scrollVar > 250 ? $sticky.css({ "top" : "0%" }) : $sticky.css({"top" : "25%" }) }) This would set the "top" CSS value to 0% if the document has been scrolled at least 250px, or set it to 25% if the document has been scrolled less than that. You'll want to adjust this value if you want it to "hook" to the top of the page at a specific point. The ternary operator (?:) there is basically just a collapsed if/else statement. If you'd like the sticky to "hook" to the top as you pass over it, you could do this instead: $(window).on("scroll", function(){ var $sticky = $("#sticky"); var stickyPosition = $sticky.offset().top; var scrollVar = $(this).scrollTop(); //gives you the scrollY position on the page scrollVar > stickyPosition ? $sticky.css({ "top" : "0%" }) : $sticky.css({"top" : "25%" }) }) Now, as you pass the container, it should automatically attach to the top based on the offset().top value.