Div opacity based on scrollbar position

问题:

Find an example of how to fade out a div when the scroll bar reaches a certain position here. But it's not a smooth throttle-type fade. Here is the code from that jsfiddle:

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});​

I want the opacity percentage to to reflect the position of the scrollbar. For instance when the scroll bar is at very top position, the div opacity is 100%. When I scroll down 35px I want the opacity of the div to fade down to 0%

Perhaps a technique could be when div A is at 35px from top, div B = 100% opacity. When div A is 0px from top, div B = 0% opacity. And have it smoothly fade at all stages in between.

Thanks!

UPDATE: Thanks for all the help most of them work fairly well, but I really need it to work within the 35px range. So I have created a new example which will make it very clear how it should work.
http://jsfiddle.net/J8XaX/1/

UPDATE 2: mobile devices: I tried this on my iPhone and the fade doesn't work smoothly. The way it works is if you slide halfway and release your finger, then the opacity goes down. But if you try to scroll smoothly it goes from 100% opacity directly to 0% opacity. Wondering if there is any way to fix this??

Thanks!!

回答1:

try something like

var divs = $('.social, .title'),
    limit = 35;  /* scrolltop value when opacity should be 0 */

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   /* avoid unnecessary call to jQuery function */
   if (st <= limit) {
      divs.css({ 'opacity' : (1 - st/limit) });
   }
});

when scrolltop reaches 35px then opacity of divs is 1 - 35/35 = 0

example fiddle: http://jsfiddle.net/wSkmL/1/
your fiddle updated: http://jsfiddle.net/J8XaX/2/ (I've changed 35 to 130px to achieve the effect you wrote in the orange div)

回答2:

var divs = $('.social, .title');
$(window).scroll(function(){
   var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
   divs.css('opacity', 1 - percent);
});

$(document).height() - $(window).height(): the scrolling area
$(document).scrollTop(): the current scroll position
percent: the current scroll position in percent
divs.css('opacity', 1 - percent);: sets the opacity of the divs

Also see this example.

回答3:

var divs = $('.social, .title');
$(window).scroll(function(){
    var fadeval = 1 - ($(window).scrollTop()) / ($(window).height());       
    divs.css({opacity: fadeval});
});​

Fiddle demo

edit: wow so many answer beat me while I was posting

edit: 2

    var divs = $('.fademe');
$(document).ready(function(){divs.css('opacity', 0);}); //can be done using CSS also
$(window).scroll(function(){

    var percent = $(document).scrollTop() / (35);
    divs.css('opacity', percent);       
});​

Updated JsFiddle

回答4:

var divs = $('.social, .title'); 
$(window).scroll(function(){
    var p = $(window).scrollTop()/ $(window).height();
    divs.stop().fadeTo("fast",p);
});