title: on scroll div gradually fadein fadeout
body: <p>I am trying to creating fadein fadeout effect with scrolling but not figure out how . it is like <code>http://www.popsci.com/</code> . There If scroll then background image (div id fixed-image ) get fading. Them code something like. But I cannot figure out yet how to easily apply in my code. Would guys please check it my code . </p>
  
  <pre><code>var opacity = 1;
        var img = element.find('img');
        // Look for featured stories.
        if (element.length &gt; 0) {
          // Attach background image element.
          $('#page-wrapper').prepend('&lt;div id="fixed-image" style="background-image: url(\'' + img.attr('data-lgsrc') + '\');"&gt;&lt;/div&gt;');
          img.addClass('hidden');
          var scrollPercent;
          $(window).scroll(function() {
            // When User scrolls down, determine percentage from top to bottom of window.
            scrollPercent = (($(window).scrollTop() / $(window).height() * 1.9) - 0.9);
            if (scrollPercent &lt; 0) {
              $('#fixed-image').css({
                '-webkit-filter'  : 'blur(0px)',
                '-moz-filter'     : 'blur(0px)',
                '-o-filter'       : 'blur(0px)',
                '-ms-filter'      : 'blur(0px)',
                'filter'          : 'blur(0px)'
              });
            }
            var opacityCount = 1.5 - Math.min(1.5, (scrollPercent + 1));
            $('#fixed-image').css('opacity', opacityCount);
            if (scrollPercent &lt;= 1) {
              $('#fixed-image').css('opacity', opacityCount);
              $('#fixed-image').css({
                '-webkit-filter'  : 'blur(' + scrollPercent * 10 + 'px)',
                '-moz-filter'     : 'blur(' + scrollPercent * 10 + 'px)',
                '-o-filter'       : 'blur(' + scrollPercent * 10 + 'px)',
                '-ms-filter'      : 'blur(' + scrollPercent * 10 + 'px)',
                'filter'          : 'blur(' + scrollPercent * 10 + 'px)'
              });
            }
            else {
              $('.content-wrapper-outer').css('background-color', 'rgba(255,255,255,' + opacity + ')');
  </code></pre>
  
  <p>my demo is here <strong><a href="https://jsfiddle.net/cyber007/6e6dbr6j/1/" rel="nofollow">https://jsfiddle.net/cyber007/6e6dbr6j/1/</a></strong></p>
  
  <p>i want <strong>slider</strong> class will be fadeIn and fadeout gradually base on scrolling </p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>$(window).scroll(function(){
      $(".slider").css("opacity", 1 - $(window).scrollTop() / 250);
    });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/cyber007/6e6dbr6j/2/" rel="nofollow">https://jsfiddle.net/cyber007/6e6dbr6j/2/</a> this one work fine. jus one minor think in console i saw that opacity value keep running after <strong>0</strong> even going <strong>-</strong> value. i don't think after value <strong>0</strong> no need down value more </p>