有什么方法可以用JavaScript和CSS改变滚动时div的高度吗？
我的意思是，当用户滚动我的站点时，我想继续降低div的高度，最后出现一个新的div。
我不能用语言确切地解释我想做什么。但我在一些网站上看到过这一点。假设有一个div，当我向下滚动时，div的大小逐渐减小，最后它不再可见。
你是说像这样？
jQuery
var divelement = document.getElementById("div"); // add div id here
window.onscroll = function(e) {
if(window.scrollY) {
var height = divelement.offsetHeight;
divelement.style.height = (height - 100) + 'px';
}
}
HTML
<div id="parent">
<div id="div">
test
</div>
</div>
CSS
#parent { height: 2000px }
#div { height: 1800px, overflow-y: auto; background-color: blue }
如果您想要动画，可以使用。animate或webkit
假设您有一个这样的结构，并且您希望更新id为“mydiv”的div的高度。
<body>
<div id='myDiv1'>This is my div</div>
<div id='myDiv'>This is my div</div> <!-- this has responsive height -->
<div id='myDiv2'>This is my div</div>
</body>
<style>
body {
height: 2000px; <!-- large body to show scroll -->
}
div {
height: 200px; <!-- other divs height -->
background: blue;
}
#myDiv {
height: 200px; <!-- our responsive div -->
background: red;
width: 100%;
transition: .5s linear;
}
</style>
您可以使用window.scrolly
let lastScrollPosition = 0; // for storing the last scroll to know whether to increase the height or decrease the height
window.addEventListener("scroll", function () {
// if the scroll position is at top reset the value at the default one
if (window.scrollY === 0) {
document.getElementById('myDiv').style.height = `200px`;
}
// if the window scroll is greater than the last scroll reduce the height
if (window.scrollY > lastScrollPosition) {
document.getElementById('myDiv').style.height = `${document.getElementById('myDiv').scrollHeight / 1.2}px`;
} else {
// if the window scroll is less than the last scroll increase the height
document.getElementById('myDiv').style.height = `${document.getElementById('myDiv').scrollHeight / .8}px`;
}
// i have used 1.2 and .8 as the aspect ratio you can divide with whatever ratio you want
// change the lastScrollPosition on scroll complete
lastScrollPosition = window.scrollY;
})
请试试这个，
使用Javascript
null
window.onscroll = function() {
var div = document.getElementById("div");
var newdiv = document.getElementById("newdiv");
var offset = div.offsetHeight - newdiv.offsetHeight - 40;
var currentScroll = document.body.scrollTop || document.documentElement.scrollTop;
if (currentScroll >= offset){
document.getElementById("div").classList.add("active");
}
}#div{
height:800px;
background:#00cc00;
}
#div.active{
height:0;
transition: height 1000ms;
}
#div p{
padding:10px;
}
#div.active p{
color:transparent;
}
p{
font-size:20px;
font-weight:600;
text-align:center;
}
#newdiv{
background:#ccc;
padding:10px;
height:100%;
}<h3>Scroll to bottom showing effect</h3>
<div id="div">
<p>S</p>
<p>C</p>
<p>R</p>
<p>O</p>
<p>L</p>
<p>L</p>
</div>
<div id="newdiv">
<p>N E W</p>
<p>D I V</p>
</div>