I have some document with bootstrap 4 like this:
<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>As you can see, my screen are divided into 2 sections vertically. <nav> section and <div article> section.
<div> is also divided vertically into <nav> and <div className="content"/>
The problem is, every time I call scrollintoview() at <div content>, the whole screen goes up, and hides navbar.
I have tried using position:absolute, but navbar just overlapped with <div article> section.
Now, how can I keep navbar stays on screen at all time?
If you want to see the example in question, just head to https://getbootstrap.com/docs/4.0/components/scrollspy
then click one of the section. You'll see that screen scrolled up, hiding everything including navbar.
I want to prevent that happens.
UPDATE: I think the problem is not in Bootstrap. It seems DOM command itself causing this behavior. $('#quality').scrollIntoView() will also scroll screen above and hide navbar. Using bookmark like <a href="#quality">Quality</a> will also scroll the window.
So I guess the problem is with the CSS. I don't use additional CSS except from bootstrap.
I have added some more style to make it work. The key is these css styles and apply it to main div.
div.app {
display: flex;
flex-direction: column;
height: 100%;
}I didn't modify bootstrap's css, and only added app css class above.
<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>