使用 jQuery 将页面滚动到某个点时，如何更改文本？

Question

当页面使用 jQuery 滚动到某个点时，我正在尝试更改 div 的内容。 目前，我正在尝试通过在页面滚动超过 800 时添加一个类并在页面高于 800 时删除它并添加一个不同的类来完成此操作。这是我当前在 jsfiddle 上的代码： https ://jsfiddle.net/ shgfrdm8/

这是jQuery代码：

$(window).scroll(function() {
            let windowTop = $(window).scrollTop();
            if (windowTop < 800) {
                $('image-content').addClass('scrolledDown');
                $('image-content').removeClass('scrolledUp');
            } else {
                $('image-content').addClass('scrolledUp');
                $('image-content').removeClass('scrolledDown')
            }
        })

CSS id/类：

.main {
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
}

.main-image {
    width: 100%;
    position: fixed;
    left: 50%;
    transform: translate(-50%) scale(500%);
}

.filler {
    height: 400vh;
}

.main-text {
    left: -14px;
    width: 99.3vw;
    height: 4000px;
    text-align: center;
    background-color: red;
    position: relative;
}

#image-content::before {
    white-space: pre;
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-family: Impact;
    font-size: 55px;
    font-weight: 550;
    color: white;
    z-index: 4;
    opacity: 1;
    position: fixed;
}

#image-content.scrolledDown::before {
    opacity: 1;
    content: 'ABC';
}

#image-content.scrolledUp::before {
    opacity: 1;
    content: "DEF";
}

的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="zoom.css">
</head>
<body>

    <div class="image-container">
        <div class="zoom main">
            <img src="images/sourcecode.jpg" class="main-image">
        </div>

        <div id="content-anchor"></div>
        <div id="image-content"></div>
    </div>

    <div class="filler">

    </div>

    <div class="main-text">

    </div>

我想知道如何使这项工作发挥作用，因为据我所知，这些类要么没有被添加，要么类不工作。

Answer 1

建议进行以下更改：

$(window).scroll(function() {
  var windowTop = $(window).scrollTop();
  if (windowTop < 800) {
    $('.image-content').addClass('scrolledDown');
    $('.image-content').removeClass('scrolledUp');
  } else {
    $('.image-content').addClass('scrolledUp');
    $('.image-content').removeClass('scrolledDown')
  }
});

这可确保您拥有正确的类选择器。

使用 jQuery 将页面滚动到某个点时，如何更改文本？

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-06-29 18:09:43

使用 jQuery 将页面滚动到某个点时，如何更改文本？

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-06-29 18:09:43

解决方案1
2 已采纳 2022-06-29 18:09:43