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>')
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');
}
});
});
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
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With