显示/隐藏从顶部 500 像素和底部前 500 像素的 div答案

【问题标题】：Show/hide a div 500 px from top and 500 px before bottom显示/隐藏从顶部 500 像素和底部前 500 像素的 div
【发布时间】：2015-09-09 20:19:09
【问题描述】：

我有一个页面，我希望在滚动 500 像素后显示图像，我使用了来自 apaul34208 (show div after 800px scroll ）。我改编的代码是这样的：

<!DOCTYPE html>
<html>
<body>

<div id="myID" class="pointer hide">
    <img src="image.png">
</div>

<script>
myID = document.getElementById("myID");

var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400) {
    myID.className = "pointer show"
} else {
    myID.className = "pointer hide"
}
};

window.addEventListener("scroll", myScrollFunc);

</script>
</body>
</html>

和 CSS：

.hide {
   display: none;
}

.show {
   display: block;
   margin-top: -80px;
}

唯一的问题是我也希望它再次消失让我们说离页面底部 400 像素。页面高度因页面而异，所以我不能只设置一个像下面这样的范围，比如 400-1000 像素。

<script>
 myID = document.getElementById("myID");

var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400 & y <= 1000 ) {
myID.className = "pointer show"
} else {
    myID.className = "pointer hide"
}
};
window.addEventListener("scroll", myScrollFunc);

</script>
</body>
</html>

任何人都知道我怎样才能做到这一点？

谢谢大家！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$(document).ready(function() {
	$(window).scroll(function() {
        console.log('scrolling ', $(window).scrollTop(), $(document).height());
    	if ($(window).scrollTop() >= 400 && $(window).scrollTop() <= ($(document).height() - 600)) {
        	$('#myID').removeClass('hide');
        }
        else {
        	$('#myID').addClass('hide');
        }
    });
});

.hide {
   display: none;
}
.body {
    height: 2000px;
}
#myID { 
    background-color: lightgray; 
    position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
    <div id="myID" class="pointer hide">
        STUFF HERE
    </div>
</div>

【讨论】：

非常感谢！这真的很好用！再次感谢！ :)

【解决方案2】：

使用document.height 获取文档的高度并保留所需的值：

myID = document.getElementById("myID");
var myScrollFunc = function () {
    var y = window.scrollY;
    if (y >= 400 & y <= document.height - 400) {
        myID.className = "pointer show";
    } else {
        myID.className = "pointer hide";
    }
};
window.addEventListener("scroll", myScrollFunc);

【讨论】：