我的滚动条隐藏在我的固定div后面，带有溢出滚动

Question

对不起，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的问题是导致这个问题的原因。也许那可能是它。

Answer 1

这就是你想要的：

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