Подчеркните текст, когда пользователь прокручивает страницу - JQUERY - PullRequest
0 голосов
/ 17 апреля 2020

Я искал способ подчеркнуть текст, когда пользователь прокручивает страницу вниз. Я хочу, чтобы подчеркивание отображалось ТОЛЬКО при прокрутке пользователя вниз. Я пробовал использовать animate. css и другие плагины, но безрезультатно. Любые идеи? Спасибо!

Ответы [ 2 ]

0 голосов
/ 17 апреля 2020

Это может решить вашу проблему:

$(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');
    }
});
0 голосов
/ 17 апреля 2020

Попробуйте это

<!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>

Вы также можете попробовать пример здесь .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...