滚动时如何修复漂浮在导航栏上的图像？

Question

长话短说，我一直在这个网站上工作以备考试。在我开始制作画廊之前，一切都很好。问题不在于画廊本身，而是导航栏，我不知道该如何解决。无论如何，当我向下滚动到我的画廊时，照片不仅隐藏在导航栏下，而且会越过它。我拥有的超大屏幕也会发生同样的事情，文字也会越过它。

这是我的 HTML

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
                id="navbardrop" data-toggle="dropdown"> Daugiau </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#"> ****** </a>
                </div>
        </li>
        <li class="nav-item yes">
            <a class="nav-link" href="#"> ****** </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"> ****** </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#"><s> ****** </s></a>
        </li>
    </ul>
</nav>
<div class="gal">
    <div class=" text-center py-3">
        <h5> ... </h5>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-2 col-md-12 mb-4">
                <div class="view overlay z-depth-1-half">
                    <img src="******.jpg" class="img-fluid"
                        alt="">
                    <a href="">
                        <div class="mask rgba-white-light"></div>
                    </a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 mb-4">
                <div class="view overlay z-depth-1-half">
                    <img src="******.jpg" class="img-fluid"
                        alt="">
                    <a href="">
                        <div class="mask rgba-white-light"></div>
                    </a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 mb-4">
                <div class="view overlay z-depth-1-half">
                    <img src="******.jpg" class="img-fluid"
                        alt="">
                    <a href="">
                        <div class="mask rgba-white-light"></div>
                    </a>
                </div>
            </div>
            <div class="col-lg-2 col-md-12 mb-4">
                <div class="view overlay z-depth-1-half">
                    <img src="******.jpg" class="img-fluid"
                        alt="">
                    <a href="">
                        <div class="mask rgba-white-light"></div>
                    </a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 mb-4">
                <div class="view overlay z-depth-1-half">
                    <img src="******.jpg" class="img-fluid"
                        alt="">
                    <a href="">
                        <div class="mask rgba-white-light"></div>
                    </a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 mb-4">
                <div class="view overlay z-depth-1-half">
                    <img src="******" class="img-fluid"
                        alt="">
                    <a href="">
                        <div class="mask rgba-white-light"></div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class=" text-center py-3">
        <button class="clearbtn" type="button" onclick="daugiau1()"> ****** </button>
    </div>
</div>

这是我的 CSS

.jumbotron {
  background-image: url('index_jt.jpg');
  height:300px;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform .2s;
  border-bottom: 2px solid black;
  color: black;
}
.jumbotron .container {
  position:relative;
  top:50px;
  transition: transform .2s;
} 
.navbar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    background-color: black !important;
}
.navbar-nav {
    text-align: center;
}
.jumbotron:hover {
    transform: scale(1.01);
}
.nav-item {
    transition: transform .2s;
}
.nav-item:hover {
    transform: scale(1.05);
}

我知道很多，但我非常感谢您的帮助。

Answer 1

我从你的 post 那里了解到，你希望你的画廊部分在滚动时位于导航栏下方，为此添加以下内容 css:

.navbar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    background-color: black !important;
    z-index: 1;
}

滚动时如何修复漂浮在导航栏上的图像？

How to fix images floating over navbar while scrolling?

html

css

gallery

navbar

bootstrap-4