javascript - 如何仅在水平滚动后定位 div 元素？

Question

我正在寻找一种方法，仅在向右滚动大约 100% 后才将页面的 #header 元素定位为“固定”。

如果剩下 < 100% 那么

#header { display:none; }

如果左 > 100% 那么

#header { position:fixed, top:0, left:0, width:50px, height:50px, color:red, z-index:9999; }

我试过这个:

<script type='text/javascript'>
var header = $("#header");
$(document).scroll(function() {
    if($(this).scrollLeft() > 1920) {
        header.css({"position" : "fixed", "top" : "0", "left" : "0", "width" : "50px", "height" : "50px", "background" : "red", "z-index" : "9999"});
    } else {
        header.css({"display" : "none"});
}
});
</script>

但它不起作用。是否可以使用百分比而不是像素数量来设置条件？ (100% 而不是 1920)

你能帮帮我吗？

Answer 1

尝试用“window.innerWidth”替换 1920。这是浏览器窗口宽度的 JS DOM 变量。