我正在寻找一种方法,仅在向右滚动大约 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)
你能帮帮我吗?
最佳答案
尝试用“window.innerWidth”替换 1920。这是浏览器窗口宽度的 JS DOM 变量。
关于javascript - 如何仅在水平滚动后定位 div 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28037680/