Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change text after scrolling

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

like image 357
Rotan075 Avatar asked Aug 18 '15 09:08

Rotan075


2 Answers

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');
        }
    });
});
like image 137
Vishnu Prasad Avatar answered Oct 02 '22 07:10

Vishnu Prasad


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
        }
    });
});
like image 22
Man Programmer Avatar answered Oct 02 '22 07:10

Man Programmer