Bootstrap additional navigation (affix) plugin problems and solutions

Use Bootstrap additional navigation (affix) plug-in has a variety of problems: record the way to solve the problem, for everyone to use the reference, say there is inappropriate, welcome to shoot bricks.

★link position offset after a click  

When you click the side navigation bar, the link specified on the page scrolls too high and is obscured by the top navigation bar. This does not seem to be the affix problem, but the reason of the top navigation bar fixed position. can also be defined in the outer Div, this self play

CSS Code

/* Janky fix for preventing navbar from overlapping */h1[id] {padding-top:80px;  Margin-top: -45px; }

The principle is such as want to 35px gap, not directly write 35px. the top padding is required to be set to 80px to prevent roof navigation bar occlusion.

Then set the top margin to -45px to achieve the 35px effect.

★ Size changes when scrolling the page
Another problem is scrolling the page, which changes size when the side navigation bar floats.

My solution is to use JS to dynamically change its width

code structure for HTML code attached navigation

<div class= "Row" >        <div class= "col-xs-3"  id= "Myscrollspy" >            <ul  class= "nav nav-tabs nav-stacked"  data-spy= "affix"  data-offset-top= ">  "               <li class= "Active" ><a href= "#section-1" > Part I </a></li>                 <li><a href= "#section-2" > Part II </a></ Li>                <li ><a href= "#section-3" > Part III </a></li>                 <li><a href= "#section-4" > part fourth </a></ li>            </ul>         </div>        <div class= "col-xs-9" > Content section </ Div></div>

JavaScript code

<script>//Initialize $ (function () {updatelogin ();//Load data});//page Change Event window.onresize = function () {            Updatelogin ();   }//Update data function Updatelogin () {$ ("Ul.affix"). Width ($ (". Col-xs-3"). width ()); };</script>

Bootstrap additional navigation (affix) plugin problems and solutions