如何使滚动部分淡入淡出？

Question

我试图让我的网站的一部分在滚动时淡出。我试着看其他问题，但都没有帮助。以下是我的代码的链接：http://bit.ly/1BmYnvo

任何帮助将不胜感激。如果你能告诉我为什么你的代码有效，那也很棒！

由于

Answer 1

在你的js中，你试图选择.social类的元素。该类未在任何地方设置，因此jQuery不会选择任何元素，因此不会在滚动时更改不透明度值。

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

＆＃13;

＆＃13;

// 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)
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;