javascript - 当用户滚动到网站部分时淡入 div-6ren

javascript - 当用户滚动到网站部分时淡入 div

转载作者：行者123 更新时间：2023-11-28 05:18:30

25

4

我有 Jquery 代码在页面加载时淡化某些 div。当用户在我的网页上滚动 2000 像素时，我将如何编辑此代码以触发此操作。

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

最佳答案

试试这个

<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>

根据需要更改功能和其他内容。这是一个让你和想法的例子。

关于javascript - 当用户滚动到网站部分时淡入 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39191042/

25

4

0

文章推荐： javascript - JQuery colorbox iframe，隐藏底栏

文章推荐： javascript - 在预订小部件上向 "Check In Date"添加 2 天

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 当用户滚动到网站部分时淡入 div