Twitter-bootstrap – Affixed top nav-bar scrollspy issue, page content overlay

affixnavbarscrollspytwitter-bootstrap

I have a nav bar that is NOT fixed to the top initially, and what I am trying to do here is that when I scroll offset for lets say, 150 pixels, the navbar gets affixed to the top with a fixed position, and it uses in-page anchor to link to different section of the page, and the top-fixed affix nav-bar will highlight the correct in page anchor area (scrollspy?)

My issue here is that, after the nav-bar gets fixed to the top, the fixed navbar prevents anchors from directing to the correct position on the page, since some of the content is hidden behind the navbar.

I have researched about this issue for quite a while and see a lot of suggestions for adding padding-top to the body, but again, the top-nav isn't fixed until affix triggers by scroll. The navigation still doesn't highlight correctly after adding padding to the body

I have tried the solution from the below section
How do I set the offset for ScrollSpy in Bootstrap?

I am bad at explaining so I will just post some screenshots here.

Here is a screenshot before the scrolling and affix
enter image description here

Here is a screenshot after the nav-bar gets fixed to the top, and I scroll to the page content
The Issue after the affixed fixed top nav

How I want it to work
enter image description here

Below is my code.

<body data-spy="scroll">
  <!--This is the nav bar getting affixed to the top-->
  <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
        <li><a href="#section1">About</a></li>
        <li><a href="#section2">Method</a></li>
        <li><a href="#section3">Findings</a></li>
        <li><a href="#section4">Final</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.navbar -->

This is the content area

<div class="mainContent">
  <div class="row">
    <div class="col-lg-7 col-md-7">
      <div id="section1">
        <h3>About the Project</h3>
      </div>
      <h4>Read the <a href="./assets/Preliminary_Avvo.pdf">Preliminary Proposal</a></h4>
    </div>

and the rest of the html are just content wrapped in section2, section3 and section4

My CSS

.navbar-custom {
  border:none;
  background-color: #FFFFFF;
  font-weight:600;
  text-transform:uppercase;
  border-width:0;
}
.navbar-custom li{
  float:none;
}
.navbar-custom  .navbar-nav>li>a {
  color: #ddd;
}
.navbar-custom  .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom     .navbar-nav .active a  {
  background-color:#902c00;
  color:#FFFFFF !important;
}
#nav {
  width: 100%;
  position:static;
  top:-32px;
}
#nav.affix {
  position: fixed;
  top: 0;
  z-index:10;
  width:940px;
}

JS

/* affix the navbar after scroll below header */
$('#nav').affix({
  offset: {
    top: 150
  }
});

/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })

Best Answer

Here is a code snippet to prevent the effect you have:

var navOffset = parseInt($('body').css('padding-top'));
$('body').scrollspy({ target: '#affix-nav', offset: navOffset+10 });
$('.navbar a').click(function (event) {
  var scrollPos = jQuery('body').find($(this).attr('href')).offset().top - navOffset;
  $('body,html').animate({ scrollTop: scrollPos}, 500, function () {});
  return false;
});

Code comes from this page where the effect is working.

Related Topic