html - 我的滚动条隐藏在带有溢出滚动的固定 div 后面
问题描述
抱歉,html 太长了,但就是这样。我希望我能从中了解我做错了什么。
.navbar {
background-color: black;
font-family: 'Bangers', cursive;
letter-spacing: 5px;
position: fixed;
width: 100vw;
z-index: 101;
}
.container {
overflow: scroll;
height: 100vh;
width: 100vw;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
body, html {
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: auto;
overiflow: initial;
}
<container>
<nav class="navbar">
<div class="dropdown">
<a href="index.html">Home
</a>
</div>
<div class="dropdown">
<button class="dropbtn">Watch
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Music Videos</a>
<a href="#">Spotlight Video</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Listen
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Rap</a>
<a href="#">Beats</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Read
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Blog</a>
<a href="#">Events</a>
<a href="#">lyrics</a>
<a href="rap-entrepreneur.html">Mission</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Submit
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Media</a>
<a href="#">Complaint</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Connect
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Email</a>
<a href="#">Cause</a>
</div>
</div>
</nav>
<div class='container'>
<div class="box">
<section class="child1">
<div class="spotlight">
<div class="video">
<div class="review-button-section">
<iframe src="iframe/read-the-peso-benjies-review-here.html" class="review_button"></iframe>
</div>
<div class="star">
<img src="images/Spotlightartist.png" class="iight" alt="spotlight_art">
<div class="vid3">
<iframe src="https://www.youtube.com/embed/vAIBwoWrdEY" class="vid"; frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</div>
<img src="images/benj.png" class="pic" alt="Peso_Benjies">
</div>
</div>
</div>
</section>
<section class="child2">
<div class="review">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
<p>Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section class="child3"></section>
<footer><a href="#">Privacy Policy</a>
<a href="#">Terms and Conditions</a>
</footer>
</div>
</div>
</container>
使用溢出时:滚动(我需要)我的滚动条隐藏在我的固定 div 后面。我看到有关 iframe 是导致此问题的原因。也许就是这样。
解决方案
这就是你想要的:
https://jsfiddle.net/jennifergoncalves/gs1a9xr7/6/
它使用粘性元素。
.navbar {
background-color: yellow;
font-family: 'Bangers', cursive;
letter-spacing: 5px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.container {
overflow: scroll;
}
body,
html {
margin: 0;
padding: 0;
}
<container>
<nav class="navbar">
<div class="dropdown">
<a href="index.html">Home
</a>
</div>
<div class="dropdown">
<button class="dropbtn">Watch
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Music Videos</a>
<a href="#">Spotlight Video</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Listen
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Rap</a>
<a href="#">Beats</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Read
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Blog</a>
<a href="#">Events</a>
<a href="#">lyrics</a>
<a href="rap-entrepreneur.html">Mission</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Submit
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Media</a>
<a href="#">Complaint</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Connect
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Email</a>
<a href="#">Cause</a>
</div>
</div>
</nav>
<div class='container'>
<div class="box">
<section class="child1">
<div class="spotlight">
<div class="video">
<div class="review-button-section">
<iframe src="iframe/read-the-peso-benjies-review-here.html" class="review_button"></iframe>
</div>
<div class="star">
<img src="images/Spotlightartist.png" class="iight" alt="spotlight_art">
<div class="vid3">
<iframe src="https://www.youtube.com/embed/vAIBwoWrdEY" class="vid" ; frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</div>
<img src="images/benj.png" class="pic" alt="Peso_Benjies">
</div>
</div>
</div>
</section>
<section class="child2">
<div class="review">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing.</h1>
<p>Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section class="child3"></section>
<footer><a href="#">Privacy Policy</a>
<a href="#">Terms and Conditions</a>
</footer>
</div>
</div>
</container>
我不认为这在所有浏览器中都可用。这是一些文档: https ://www.w3schools.com/howto/howto_css_sticky_element.asp
推荐阅读
- android - 使用 Play 计费库暂停测试订阅时出现问题
- javascript - 根据第一次调用的结果进行 Ajax 调用
- firebase - 是否可以使用触发电子邮件扩展名将文件附加到我想通过 firebase 发送的电子邮件?
- powershell - 在 Powershell 中创建目录时出错
- python - Python列表,将所有值保留在列表的所有子列表中
- redis - Redis key eviction 澄清
- javascript - 加载javascript时如何在vue组件中引用javascript中的img
- arrays - 将数组值批量分配给变量
- git - bitbucket/git 是否为分支和提交提供唯一标识符?
- amazon-web-services - 使用 AWS CDK 和 RDS (Aurora),我可以在哪里更改证书颁发机构?