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

Page Views

This page has been viewed 146 times.

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
The happiest People don't have the best of everything, they just make the best of everything.
Unknown