我有一些引导程序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>
也被垂直分为
<导航>
和
<div className="content"/>
问题是,每次我打电话
scrollintoview()
在
<div content>
,整个屏幕向上,并隐藏导航栏。
我试过用
position:absolute
,但导航栏与
<分部条款
第节。
现在,我怎样才能让导航栏一直保持在屏幕上?
如果你想看看这个例子,就直接去
https://getbootstrap.com/docs/4.0/components/scrollspy
然后单击其中一个部分。你会看到屏幕向上滚动,隐藏了包括导航栏在内的所有内容。
我想防止这种情况发生。
更新:我认为问题不在引导程序中。似乎是dom命令本身导致了这种行为。
$('#quality').scrollIntoView()
也会在上面滚动屏幕并隐藏导航栏。使用书签
<a href="#quality">Quality</a>
也会滚动窗口。
所以我想问题出在CSS上。除了引导外,我不使用其他CSS。
