为啥一旦我滚动标题部分，引导导航栏就会消失？

Posted 2023-05-08

【中文标题】为啥一旦我滚动标题部分，引导导航栏就会消失？

【英文标题】：Why bootstrap navbar disappears as soon as i scrolled header section?为什么一旦我滚动标题部分，引导导航栏就会消失？

【发布时间】：2021-06-05 14:33:12

【问题描述】：

我一直在尝试保持导航栏，但是当我滚动导航栏时，一旦通过标题部分，导航栏就会消失。我将标题部分的高度指定为 100vh。我需要导航栏来更改颜色，这样它就可以在白色背景的其他部分可见。

 <header class="header">
        <nav class="navbar navbar-expand-lg navbar-custom fixed-top">
            <div class="container">
                <a href="#" class="navbar-brand">Sharvanand</a>
                <button class="navbar-toggler" data-toggle="collapse" data- 
                   target="#navbarMenu">
                   <!--<span class="navbar-toggler-icon custom-toggler"></span>-->
                   <i class="fas fa-bars fa-lg"></i>
                    </button>
                        <div class="navbar-collapse collapse" id="navbarMenu">
                             <ul class="navbar-nav ml-auto">
                            <li class="nav-item active "><a href="#about-me" class="nav-link scroll">About Me</a></li>
                            <li class="nav-item"><a href="#projects" class="nav-link scroll">Projects</a></li>
                             <li class="nav-item "><a href="#skills" class="nav-link scroll">Skills</a></li>
                            <li class="nav-item"><a href="#education"class="nav-link scroll">Education</a></li>
                             </ul>
                             </div>
                             </div>
                            </nav>
                             <div class="main-box">
                             <img src="img/shaggy.jpg" >
                            <h3>Front End Developer</h3>
                         <div class="text-center">
                     <a href="https://github.com/Sharvanand" target="blank" class="btn 
                 custom-btn">Visit GitHub</a>
                <a href="#" class="btn custom-btn">Download Resume</a>
            </div>
        </div>
   </header>
 
This is the styling css part
.header 
  position: relative;
  width: 100%;
  height:100vh;
  background-image: linear-gradient(
    to right bottom,
    rgba(1, 9, 49, 0.801),
    rgba(90, 105, 148, 0.801)
  );
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text 
  color: rgba(205, 206, 247, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.3rem;
 

/* change the link color */
.navbar-custom .navbar-nav .nav-link 
    color: rgba(255, 255, 255, 0.5); 
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin-right: 10px;
  
 

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link 
  color: #ffffff;

【参考方案1】：

改为class="fixed-top" 试试class="navbar-fixed-top" 。也许这会解决你的问题。

【讨论】：

首先。感谢您的帮助。我试过`navbar-fixed-top。这次导航栏保持静止。根本不动。 :(