如何使部分在滚动条上淡入淡出？

Question

我正在尝试让我网站的一部分在滚动时淡出。我尝试查看其他问题，但 none 有所帮助。这是我的代码的 link：http://bit.ly/1BmYnvo

如有任何帮助，我们将不胜感激。如果您能告诉我为什么您的代码有效，那也太好了！

谢谢

Answer 1

在您的 js 中，您正在尝试 select 个元素与 .social class。 class 未在任何地方设置，因此 jQuery 不会 select 任何元素，因此不会更改滚动时的不透明度值。

修复：将class="social"添加到您的div。

// As @Bojangles recommended, search for element only once to improve performace.
var $socialDiv = $('.social');
 
$(window).scroll(function() {
  //Get scroll position of window 
  var windowScroll = $(this).scrollTop();

  //Slow scroll of social div and fade it out 
  $socialDiv.css({
    'margin-top': -(windowScroll / 3) + "px",
    'opacity': 1 - (windowScroll / 550)
  });
});

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 500%;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
  Hi!
</div>

如何使部分在滚动条上淡入淡出？

How to make section fade on scroll?

javascript

scroll

fade