У меня есть документ с начальной загрузкой 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>
Как видите, мой экран разделен на 2 секции по вертикали.<nav> раздел и <div article> раздел.<div> также делится по вертикали на <nav> и <div className="content"/>
Проблема в том, что каждый раз, когда я звоню scrollintoview() в <div content>, весь экран поднимается вверх и скрывает панель навигации.
Я пытался использовать position:absolute, но панель навигации просто перекрывалась с секцией <div article>.
Теперь, как я могу держать navbar постоянно на экране?
Если вы хотите увидеть рассматриваемый пример, просто перейдите на https://getbootstrap.com/docs/4.0/components/scrollspy
затем нажмите один из разделов.Вы увидите, что экран прокручивается вверх, скрывая все, включая навигационную панель.
Я хочу предотвратить это.
ОБНОВЛЕНИЕ: Я думаю, что проблема не в Bootstrap.Кажется, сама команда DOM вызывает такое поведение.$('#quality').scrollIntoView() также прокрутит экран выше и скроет панель навигации.Использование закладки, такой как <a href="#quality">Quality</a>, также прокручивает окно.
Так что я думаю, проблема в CSS.Я не использую дополнительный CSS, кроме как из начальной загрузки.