Question

I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.

I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.

Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:

Would love to hear from someone who has the solution.

Thanks! 🙂

Answer 1

Here is a start http://jsfiddle.net/ZtGK6/

$(window).scroll(function(){
      if($(window).scrollTop()>100){
         $("#theDiv").fadeIn();
      }else{
         $("#theDiv").fadeOut();
      }

});