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

当我运行此命令时，我没有收到任何错误，但是即使滚动到1000px以上，也似乎未触发该事件。

JSFiddle链接：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