我遇到了
https://minimill.co/，看到它是一个很好的例子，我正在努力实现。
我试图显示列出的项目，如网站：
<ul class="wrap">
<li>
<div class="content">
<div class="left-img">
<img src="/assets/img/macbook-image.png"/>
</div>
<h2 class="right-details">
Item 1
</h2>
</div>
</li>
<li>
<div>
<h2>
Item 2
</h2>
</div>
</li>
</ul>
和css：
.wrap {
display: block;
list-style: none;
position: relative;
padding: 0;
margin: 0;
border: 0;
li {
background-color: green;
}
}
.content {
margin: 0 auto;
max-width: 66rem;
width: 90%;
padding: 0;
border: 0;
position: relative;
}
.right-details {
display: inline-block;
float: right;
Box-size: border-Box;
width: 33.33333%;
}
.left-img {
display: inline-block;
float: left;
Box-sizing: border-Box;
width: 66.66666%;
img {
width: 50px;
}
}
但是第一个< li>消失。
如何在一个长的卷轴中显示我的内容，就像https://minimill.co/这样做？我正在网站上实施吗？任何对模仿它的更多指导或洞察将不胜感激。
提前谢谢，并接受/ upvote答案
解决方法
你应该使用min-height：100vh而不是height：100vh ;.请检查我的
fiddle
// select all elements with data-background attribute
var lis = document.querySelectorAll("[data-background]");
// create empty array
var heights = [];
// use for loop to "discover" all of the elements in lis array
for(var i = 0; i < lis.length; i++){
// get element's distance from top
var distanceFromTop = lis[i].offsetTop;
// get value from data-backgrount attribute
var background = lis[i].getAttribute("data-background");
// push background and distance to heights array
heights.push({background: background,distance: distanceFromTop});
};
// check if page was scrolled
window.addEventListener("scroll",function(evt){
// if page was scrolled what's the user's distance from top
var distanceFromTop = this.scrollY;
// find distances in heights array
heights.forEach(function(height) {
// check if user reached another checkpoint
if(height.distance < distanceFromTop) {
// if so,change the background to value that we got from data-background attribute
//
document.body.className = height.background;
}
});
});
body {
transition: background-color .8s ease;
-webkit-transition: background-color .8s ease;
}
body.blue { background-color: #39f; }
body.red { background-color: #FF351A; }
body.dark { background-color: #222; }
body.yellow { background-color: #fd3; }
body.deep-blue { background-color: #417ABA; }
body.white { background-color: #fff; }
body.beige { background-color: #F7D693; }
li {
min-height: 100vh;
list-style-type:none;
}
<body class="blue">
<ul>
<li data-background="blue"></li>
<li data-background="red"></li>
<li data-background="dark"></li>
<li data-background="yellow"></li>
<li data-background="deep-blue"></li>
<li data-background="white"></li>
<li data-background="beige"></li>
</ul>
</body>
你应该使用min-height：100vh而不是height：100vh ;.请检查我的fiddle
