当用户滚动到网站的部分时，在div中淡入

我有Jquery代码在页面加载时褪色某些div。当用户在我的网页上滚动2000px时，我该如何编辑这段代码来触发这个呢?

JQUERY

    $(function () { $(window).load(function() {
    $('.welcome-image').addClass('animated fadeInRightBig');
})
  var reset = function reset() {
          console.log($(this).scrollTop());
            // do stuff when window `.scrollTop()` > 75
            if ($(this).scrollTop() > 2000) {
              // turn off scroll event so `fx` not called
              // during ongoing animation
              $(this).off("scroll");
                // when all animations complete
                fx()
            }
        };
        // if `fx` should only be called once ,
        // change `.on()` to `.one()` ,
        // remove `.then()` callback following `fx()`
        // within `reset`
        $(window).on("scroll", reset);
    });

try this

<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
body{
  height: 1000px;
}
</style>
<body>
 <h2>scroll the body to see the magic</h2>
</body>
<script type="text/javascript">
$(window).on("mousewheel", function() {
        var the_position = $(document).scrollTop();
        if (the_position > 200) 
          {
            $('body').css({"background-color":"red"});
          }
          else
          {
            $('body').css({"background-color":"white"});
          }
    });
</script>
</html>

根据需要改变功能和其他东西。

$(window).load(function() {
    $(window).on('scroll', function () {
       if ($(window).scrollTop() > $("#section").scrollTop()) {
          $('.welcome-image').addClass('animated fadeInRightBig');
       }
   });
})

它可能对你有帮助

相关内容

最新更新

热门标签：