很抱歉，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的一些问题。也许是这样。
答案 0 :(得分：0)
这就是您想要的：
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