Robolisk Robolisk - 6 months ago 18
CSS Question

navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

http://www.new.techmoney360.com/ is the website and it's created in wordpress.

the entire navigation section is encompassed by

mkd-menu-area


although, it has a couple different
<div>
's and a
<nav>
within it.
How can I grab all of these and have them stick to the top while scrolling down?

http://www.vice.com does exactly what I'm trying to emulate

The way this website work's is all the html is created via php so changing the structure is slightly difficult and something I'd prefer to avoid. I was hoping I could apply some css of some sort and have it stick.

here is some javascript I tried to use on the navigation menu. I added a ID to the navigation menu so I can target it easily.

window.onscroll = changePos;

function changePos()
{
var header = document.getElementsById("navmenu");
if (window.pageYOffset > 70)
{
header.style.position = "fixed";
header.style.top = "0";
}
else
{
header.style.position = "";
header.style.top = "";
}
}


and it never worked :/
This script makes perfect sense to me?

Answer

Put the header fixed:

.mkd-top-bar {
  position: fixed;
  [...]
}

.mkd-page-header {
  position: fixed;
  top: 33px;
  [...]
}

Info: http://www.w3schools.com/cssref/pr_class_position.asp

And separate the content with margin top:

.mkd-content { 
  margin-top: 200px;
  [...]
}

Example scrolling