Underline text once user scrolls page - JQUERY
Question
I have been looking for a way to underline text once the user scrolls down the page. I want the underline to show ONLY when the user scrolls down. I have tried using animate.css and other plugins but to no avail. Any ideas? Thank you!
2 answers
solution1
0 ACCPTED 2020-04-17 13:06:02
Try this
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin-top : 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll',function(){
var a = $(window).scrollTop();
//alert(a);
if( a > 50) {
$("p").css("textDecoration", "underline");
}
else {
$("p").css("textDecoration", "none");
}
});
});
</script>
</head>
<body>
<div>
<p>If you scroll, I will underline myself.</p>
<p>If you scroll, I will underline myself.</p>
<p>If you scroll, I will underline myself.</p>
<p>If you scroll, I will underline myself.</p>
</div>
</body>
</html>
You can also try example here .
solution2
0 2020-04-17 13:07:05
This might solve your issue:
$(document).on("scroll", function(){
var topPX = $(window).scrollTop(); //how many pixels the user scrolled
if(topPX > 100){
//underlines the text once the user scrolls past 100px
$('.text').css('text-decoration','underline');
}
if(topPX < 100){
//reverts it back to normal if the user came back to to the "below 100px" position
$('.text').css('text-decoration','none');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Slide up footer once user scrolls to bottom of page - flickering
How to underline text in jquery
Underline text using Jquery
using jQuery .load() when user scrolls to the end of page
jQuery trigger action when a user scrolls past a certain part of the page
How to start a jQuery event when the user scrolls to the bottom of the page?
How do I use JQuery to detect if a user scrolls to the bottom of the page?
How to load more content with ajax when user scrolls to the bottom the of page only once
Javascript appendChild scrolls the user on page
jQuery lightbox plugin that scrolls with the page
Related Tags