ScrollSpy bootstrap 滚动整个文档
ScrollSpy bootstrap scroll the whole document
我有一些文档 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"/>
问题是，每次我在 <div content> 调用 scrollintoview() 时，整个屏幕都会上升，并隐藏导航栏。
我试过使用 position:absolute，但导航栏与 <div article> 部分重叠。
现在，如何让导航栏始终显示在屏幕上？
如果您想查看相关示例，请前往 https://getbootstrap.com/docs/4.0/components/scrollspy
然后单击其中一个部分。您会看到屏幕向上滚动，隐藏了包括导航栏在内的所有内容。
我想防止这种情况发生。
更新：我认为问题不在 Bootstrap 中。似乎 DOM 命令本身导致了这种行为。 $('#quality').scrollIntoView() 还将在上方滚动屏幕并隐藏导航栏。使用像 <a href="#quality">Quality</a> 这样的书签也会滚动 window。
所以我猜问题出在 CSS 上。除了 bootstrap，我不使用额外的 CSS。
我添加了更多样式以使其正常工作。关键是这些 css 样式并将其应用于主要 div.
div.app {
display: flex;
flex-direction: column;
height: 100%;
}
我没有修改bootstrap的css，只是在上面添加了appcssclass。
<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>
我有一些文档 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"/>
问题是，每次我在 <div content> 调用 scrollintoview() 时，整个屏幕都会上升，并隐藏导航栏。
我试过使用 position:absolute，但导航栏与 <div article> 部分重叠。
现在，如何让导航栏始终显示在屏幕上？
如果您想查看相关示例，请前往 https://getbootstrap.com/docs/4.0/components/scrollspy
然后单击其中一个部分。您会看到屏幕向上滚动，隐藏了包括导航栏在内的所有内容。
我想防止这种情况发生。
更新：我认为问题不在 Bootstrap 中。似乎 DOM 命令本身导致了这种行为。 $('#quality').scrollIntoView() 还将在上方滚动屏幕并隐藏导航栏。使用像 <a href="#quality">Quality</a> 这样的书签也会滚动 window。
所以我猜问题出在 CSS 上。除了 bootstrap，我不使用额外的 CSS。
我添加了更多样式以使其正常工作。关键是这些 css 样式并将其应用于主要 div.
div.app {
display: flex;
flex-direction: column;
height: 100%;
}
我没有修改bootstrap的css，只是在上面添加了appcssclass。
<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>