Bootstrap Scrollspy (ошибка в изменении высоты)

220

11 декабря 2017, 14:21

Проблема в том, что когда указываешь высоту секций (у меня две секции): auto, то указывается при первом запуске страницы указывает что я нахожусь на 2 секции и буквально стоит слегка переместиться вниз, то срабатывает 1 секция и потом все нормально, я поднимаюсь вверх указывается 1 секция, опускаюсь вниз указывается 2. Но при запуске сначала срабатывает 2 секция, пока немного не переместишься вниз.

С фиксированной высотой все в порядке.

Вот код из примера: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h

body { 
      position: relative;  
  } 
  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;} 
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;} 
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;} 
  #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;} 
  #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

<!DOCTYPE html> 
<html> 
<head> 
  <title>Bootstrap Example</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span>                         
      </button> 
      <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav"> 
          <li><a href="#section1">Section 1</a></li> 
          <li><a href="#section2">Section 2</a></li> 
          <li><a href="#section3">Section 3</a></li> 
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
              <li><a href="#section41">Section 4-1</a></li> 
              <li><a href="#section42">Section 4-2</a></li> 
            </ul> 
          </li> 
        </ul> 
      </div> 
    </div> 
  </div> 
</nav>     
 
<div id="section1" class="container-fluid"> 
  <h1>Section 1</h1> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section2" class="container-fluid"> 
  <h1>Section 2</h1> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section3" class="container-fluid"> 
  <h1>Section 3</h1> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section41" class="container-fluid"> 
  <h1>Section 4 Submenu 1</h1> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
<div id="section42" class="container-fluid"> 
  <h1>Section 4 Submenu 2</h1> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div> 
 
</body> 
</html>