Question

ease-scroll is a div with one anchor tag in it.

<div id="ease-scroll">
    <a href="#">&uarr; Top</a>      
</div>

I need the div’s opacity to be 0.9 when scrollTop() is greater than 450, and this works as expected, and if I now scroll up thereby scrollTop() value is less than 450, I want to revert the opacity to original value 0.1. But, revert opacity value is not happening.
Any clue what is wrong?

// Help navigate!
jQuery(window).scroll(function () { 
    if ( jQuery(window).scrollTop() > 450 && jQuery("#ease-scroll").css("opacity") != 0.9 ) {
       jQuery("#ease-scroll").animate( {opacity: 0.9}, 'medium');
    }
    if ( jQuery(window).scrollTop() < 450 && jQuery("#ease-scroll").css("opacity") != 0.1 ) {
        jQuery("#ease-scroll").animate( {opacity: 0.1}, 'medium');
    }
});

Answer 1

jsBin demo

jQuery(function( $ ){

   $(window).scroll(function(){
       
      var scrolled = $(window).scrollTop();
      $("#ease-scroll").stop().animate({opacity: (scrolled>450 ? 0.9 : 0.1) }, 600);

   });

});