scrollTop() 仅在页面刷新后显示结果

Question

Hii I am working on jquery but my code working in a weird manner. Here is my code

$(document).ready(function() {
        if($(window).scrollTop() >= 50) {
            $("h1").fadeIn("slow");
        };
    })

I want my text to fadein when scroll. But my text appear ony after I refresh page after scrolling. I dont know Why what is wrong with my code.

Answer 1

As I wrote above in the comment, you need to wrap your logic in a window scrolling event. Like this:

$(window).scroll(function() {
    if($(window).scrollTop() >= 50) {
      $("h1").fadeIn("slow");
    }
})

I made an example for you by specifying the position: sticky for the h1 tag so that you can visually understand how the code works.

 $(document).ready(function() { $(window).scroll(function() { if($(window).scrollTop() >= 50) { $("h1").fadeIn("slow"); } }) })

 body { height: 3000px; } h1 { display: none; position: sticky; top: 0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Test_Text</h1>