Rahul Rahul - 2 months ago 9
CSS Question

Remove sticky header after scrolling to some point

I want to remove the sticky

css
from the header after it reaches 300px from top but with
css
I am unable to do so and I have 0
jquery
knowledge.

Is it possible from css alone?

Here's my sample code

Answer Source

I've added this to a jsfiddle for you, you would need to use jquery to get this to work.

Please see: https://jsfiddle.net/975zff02/

$(function(){
  $(window).scroll(function(e) {
    if($(this).scrollTop()>300){
      $('.header').fadeOut(); // Fading in the button on scroll after 150px
    }
    else{
      $('.header').fadeIn(); // Fading out the button on scroll if less than 150px
    }
  });
});