Change text after scrolling

Question

Hello I got a question regarding changing a text after a user scrolled the page.

How can I change the text of my h1 from YES to NO when a user scrolled?I have tried several things like .append(), .html() but with no succes.

My code: 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
        }
    });
});

The reason I want this is because in the case of using .html(), I can add inline html objects like: .html('<span>yes</span>')

possible duplicate of [set text in jquery](http://stackoverflow.com/questions/4511804/set-text-in-jquery) — Glorfindel, Aug 18 '15 at 09:24

score 8 · Accepted Answer · answered Aug 18 '15 at 09:23

try this

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

score 4 · Answer 2 · edited Feb 13 '19 at 09:15

4

try this

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

edited Feb 13 '19 at 09:15

Pradeep Kumar

4,065
2
33
40

answered Aug 18 '15 at 09:24

Man Programmer

5,300
2
21
21

1

You shouldn't really have to add an ID/Class to the H1, as you are only supposed to have one on a page – Geert Aug 18 '15 at 13:01

score 3 · Answer 3 · answered Aug 18 '15 at 09:26

You can try this with much optimized code:

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

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

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

score 2 · Answer 4 · answered Aug 18 '15 at 09:28

2

You can make yours element position fixed and then try this logic

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

Hope it will help

answered Aug 18 '15 at 09:28

Roli Agrawal

2,356
3
23
28

1

You shouldn't really have to add an ID/Class to the H1, as you are only supposed to have one on a page – Geert Aug 18 '15 at 13:01
1

Thanks for suggestion – Roli Agrawal Aug 18 '15 at 15:54

Change text after scrolling

4 Answers4