jQuery:CSS在滚动条上的平滑过渡-jQuery:CSSsmoothtransitiononscroll

2  

var div = $('.red');
var limit = 500;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   div.css({ 'opacity' : (1 - st/500) });
})

.red {
  background:red;
  position:fixed;
  width:100%;
  height:20px;
}

.blue {
  position:fixed;
  background:blue;
  height:20px;
  width:100%;
}
.content {
  height:20px;
  position:fixed;
  width:100%;
}

 a b c

when scrolltop reaches 500px then opacity of div.red is 1 - 500/500 = 0

当scrolltop达到500px时，div.red的不透明度为1 - 500/500 = 0

1  

You might want to check out Scrollie

你可能想看看Scrollie

Funsella made a great example over at CodePen for you to play with: https://codepen.io/Funsella/pen/yLfAG

Funsella在CodePen为您做了一个很好的示例:https://codepen.io/Funsella/pen/yLfAG

$( window ).ready(function() {

var wHeight = $(window).height();

$('.slide')
  .height(wHeight)
  .scrollie({
    scrollOffset : -50,
    scrollingInView : function(elem) {

      var bgColor = elem.data('background');

      $('body').css('background-color', bgColor);

    }
  });

});

});

Link to Scrollie on GitHub

链接到GitHub上的Scrollie