add a class or remove it based on window scroll location

if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled.

then you add a fixed property to make it stick

HTML

<div class='header'>This is the .header div</div>

CSS

.header {
background:#000;
color:#FFF;
padding:10px;
}
.header-stick {
font-weight:bold;
}

Javascript

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('.header').addClass('header-stick');
  } else {
    $('.header').removeClass('header-stick');
  }
});
This is the .header div

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown