[英]How to make div disappear when scrolling
Could someone help me make a div disappear when as it scrolls? 有人可以帮我让div滚动时消失吗?
For example, if I have a simple header and a bunch of paragraphs below and I scroll, I want the header to stay fixed at the top and the paragraphs below it to scroll past and disappear beneath the header. 例如,如果我有一个简单的标题和下面的一堆段落并进行滚动,则希望标题保持固定在顶部,而下面的段落则滚动过去并消失在标题下方。 So far I have tried the following:
到目前为止,我已经尝试了以下方法:
https://jsfiddle.net/5k8u9w9t/2/ https://jsfiddle.net/5k8u9w9t/2/
basically, I set the header's styling to position: fixed
, but the paragraphs are not disappearing below it. 基本上,我将标题的样式设置为
position: fixed
,但是段落并没有在其下方消失。 Can someone help? 有人可以帮忙吗?
Thanks in advance! 提前致谢!
This will tidy it up... 这会整理一下...
.container1 {
position: fixed;
top: 0;
width: 100vw;
background-color: #FFFFFF;
z-index: 1;
}
.container2 {
position: relative;
margin-top: 80px;
}
I don't know exactly what you are trying to do, but maybe this answers your question: 我不知道您到底想做什么,但这也许可以回答您的问题:
.container1 {
position: fixed;
z-index: 1;
background: #fff;
} }
Is this what you are looking for? 这是你想要的?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h1>Fixed Top Menu</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.