JQuery 显示隐藏对象的 .scroll() 事件不起作用

Question

我使用 .scroll() 是为了让图像 #mag 在我滚动到某个点后可见。

            $(window).scroll(function() {
                var y_scroll_pos = window.pageYOffset;
                var scroll_pos_test = 1000;             

                if(y_scroll_pos > scroll_pos_test) {
                    $("#mag").css("visibility","visible");
                }
            });

        <img id= "mag" src="assets/maginatransparent.png" style = "visibility: hidden; position: fixed; height: 40vh; bottom: 30vh; right: 0">

当我运行这样做时，我没有收到任何错误，但即使我滚动超过 1000 像素，事件似乎也没有被触发。

JSFiddle Link：https://jsfiddle.net/k04qck9h/ 请注意，这使用 span 而不是 img.

Answer 1

您需要使用$(window).scrollTop();

   $(window).scroll(function() {
        var y_scroll_pos = $(window).scrollTop();
        var scroll_pos_test = 1000;             

        if(y_scroll_pos > scroll_pos_test) {
            $("#mag").css("visibility","visible");
        }else{
            $("#mag").css("visibility","hidden");
        }
    });

DEMO

JQuery 显示隐藏对象的 .scroll() 事件不起作用

JQuery .scroll() event to show hidden object does not work

javascript

css

jquery

scroll

jquery-events