Scrollspy set size

Question

I want to change the size of the window where the scrollspy is. Because I needed many intense and became disproportionate follows photo.

Answer 1

You can force with jQuery so that the scrollspy div has the same height as the menu:

$(function(){
   $('["data-spy=scroll"]').css("height", $("ul.nav-pills").outerHeight()+"px");
});

In the example above, the selector ul.nav-pills would be the menu. If you’re using the same selector, you don’t need to change it, but if you’re using another, a class or id, just change the code (it would be recommended to use one id in the menu or a single class, not to conflict with other elements).

What the code does? When loading the DOM, the code takes the height of the menu (light gray background element) and puts it in the scrollspy div, which has the tribute data-spy="scroll".

See an example (run in full screen):

$(function(){
   $("[data-spy=scroll]").css("height", $("ul.nav-pills").outerHeight()+"px");
});

ul.nav-pills {
position: fixed;
background: #ddd;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}

[data-spy="scroll"]{
position: relative;
overflow: auto;
height: auto;
font-size: 28px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <nav class="col-sm-3" id="myScrollspy">
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><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>
        <li><a href="#section5">Section 5</a></li>
        <li><a href="#section6">Section 6</a></li>
        <li><a href="#section7">Section 7</a></li>
        <li><a href="#section8">Section 8</a></li>
        <li><a href="#section9">Section 9</a></li>
        <li><a href="#section10">Section 10</a></li>
      </ul>
    </nav>
    <div class="col-sm-9" data-spy="scroll">
      <div id="section1">    
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section2"> 
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>        
      <div id="section3">         
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
      <div id="section41">         
        <h1>Section 4-1</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>      
      <div id="section42">         
        <h1>Section 4-2</h1>
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
      </div>
    </div>
  </div>
</div>