我有一些像bootstrap 4这样的文档：
<div className="container">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" aria-current="true" href="/">
<img src="/assets/logo.gif">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse order-3 collapse" id="navbar" style="">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link gray large1" aria-current="false" id="Products" href="/products">PRODUCTS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link gray dropdown-toggle large1 active" href="#" id="navbarKnow-How" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">KNOW-HOW</a>
<div class="dropdown-menu" aria-labelledby="navbarKnow-How">
<a class="dropdown-item" aria-current="false" id="Know-How.Innovation" href="/knowhow#innovation">Innovation</a>
<a class="dropdown-item" aria-current="false" id="Know-How.Quality" href="/knowhow#quality">Quality</a>
<a class="dropdown-item" aria-current="false" id="Know-How.Logistical Expertise" href="/knowhow#expertise">Logistical Expertise</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link gray large1" aria-current="false" id="Contact" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
<div className="article">
<nav id="sections" class="navbar nav-pills flex-column">
<a class="nav-link" href="#innovation">Innovation</a>
<a class="nav-link" href="#quality">Quality</a>
<a class="nav-link" href="#expertise">Expertise</a>
</nav>
<div className="content" data-spy="scroll" data-target="#sections" data-offset="0"><h1 id="innovation">Innovation</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar dictum ullamcorper. Proin libero tellus, ultricies eget turpis vitae, elementum pulvinar mi. Aliquam ullamcorper metus sed nunc varius ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra lorem ac nibh fringilla, eget mattis magna dignissim. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam volutpat tortor lorem,eget finibus est imperdiet id. Suspendisse vehicula lobortis urna, nec malesuada arcu posuere ut. Integer at velit non tortor
<h1 id="quality">Quality</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar dictum ullamcorper. Proin libero tellus, ultricies eget turpis vitae, elementum pulvinar mi. Aliquam ullamcorper metus sed nunc varius ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra lorem ac nibh fringilla, eget mattis magna dignissim.
</div>
</div>
</div>
如您所见，我的屏幕垂直分为两个部分。 <nav>部分和<div article>部分。
<div>也会垂直划分为<nav>和<div className="content"/>
问题是，每次我在scrollintoview()拨打<div content>时，整个屏幕都会亮起，并隐藏导航栏。
我尝试使用position:absolute，但导航栏只与<div article>部分重叠。
现在，如何让导航栏始终保持在屏幕上？
如果您想查看相关示例，请前往https://getbootstrap.com/docs/4.0/components/scrollspy
然后单击其中一个部分。您将看到该屏幕向上滚动，隐藏包括导航栏在内的所有内容。
我想防止这种情况发生。
更新：我认为问题不在Bootstrap中。似乎DOM命令本身导致了这种行为。 $('#quality').scrollIntoView()也会滚动上方的屏幕并隐藏导航栏。使用<a href="#quality">Quality</a>之类的书签也会滚动窗口。
所以我猜问题就在于CSS。除了bootstrap之外，我不会使用其他CSS。
答案 0 :(得分：0)
我添加了更多样式以使其有效。关键是这些css样式并将其应用于主div。
div.app {
display: flex;
flex-direction: column;
height: 100%;
}
我没有修改bootstrap的css，只在上面添加了app css类。
<div class="container app">
<div class="row" id="mainNav">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand active" aria-current="true" href="/">
<img src="/assets/logo.gif">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3" id="navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link gray large1" aria-current="false" id="Products" href="/products">PRODUCTS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link gray dropdown-toggle large1 active" href="#" id="navbarKnow-How" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">KNOW-HOW</a>
<div class="dropdown-menu" aria-labelledby="navbarKnow-How">
<a class="dropdown-item" aria-current="false" id="Know-How.Innovation" href="/knowhow#innovation">Innovation</a>
<a class="dropdown-item" aria-current="false" id="Know-How.Quality" href="/knowhow#quality">Quality</a>
<a class="dropdown-item" aria-current="false" id="Know-How.Logistical Expertise" href="/knowhow#expertise">Logistical Expertise</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div class="article">
<nav id="sections" class="list-group">
<a class="list-group-item list-group-item-action" href="#innovation">Innovation</a>
<a class="list-group-item list-group-item-action" href="#quality">Quality</a>
<a class="list-group-item list-group-item-action" href="#expertise">Expertise</a>
</nav>
<div class="content" data-spy="scroll" data-target="#sections" data-offset="100">
<h1 id="innovation">Innovation</h1>
<h1 id="quality">Quality</h1>
<h1 id="expertise">Expertise</h1>
</div>
</div>
</div>