Question

您好我在用户滚动页面后有一个关于更改文本的问题。

当用户滚动时，如何将h1的文本从YES更改为NO？我已尝试了多项内容，例如.append()，.html()，但没有成功。

我的代码：JSFIDDLE

HTML

<h1>YES</h1>

<article style="height: 1000px">
    <p>test</p>
</article>

JS

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            //change yes to no
        } else {
            //set h1 text to yes
        }
    });
});

我想要这个的原因是因为在使用.html()的情况下，我可以添加内联html对象，例如：.html('<span>yes</span>')

Answer 1

试试这个

WORKING FIDLE

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) { 
            //change yes to no
            $('h1').html('No');
        } else {
            //set h1 text to yes
            $('h1').html('Yes');
        }
    });
});

Answer 2

试试这个

<h1 id="h1">YES</h1>


$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $("#h1").text("NO");
            //change yes to no
        } else {
            $("#h1").text("YES");

            //set h1 text to yes
        }
    });
});

Answer 3

您可以使用优化的代码尝试此操作：

＆＃13;

$(window).scroll(function() {
  $('h1').html($(this).scrollTop() > 100 ? 'Yes':'No');
}).scroll(); //<---triggers the scroll on load

＆＃13;

body{height:1200px;}
h1{position:fixed;} /* <---for example only i positioned it fixed.*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1></h1>

＆＃13;

Answer 4

您可以修复元素位置，然后尝试此逻辑

HTML

<h1 id="yy" style="position:fixed">YES</h1>

<article style="height: 1000px">
    <p>test</p>
</article>

Jquery的

$(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
           $("#yy").text("NO")
        } else {
            $("#yy").text("YES")
        }
    });
});

JSFIDDEL

希望它会有所帮助

滚动后更改文本

4 个答案: