fixed navigation bar overlaying content when position is given dynamically

Question

I am trying to create a one page website with multiple sections. my problem is that once I click on a link in the navigation bar it scrolls to the item but covers part of the content.

the navigation is only given static positioning when scrolling past its original position (Hope that makes sense). here is a link to my dev site http://wp.matthewwood.me/

here is my code for adding the fixed positioning using JQuery. i tried offsetting it by -50px to accommodate for the fixed nav size but this has not solved the problem.

   $(document).ready(function(){
   var offset = $(".navbar").offset().top;     
   $(window).scroll(function() {
         if ($(window).scrollTop() >= offset) {
             $('.navbar').addClass('navbar-fixed-top');

         }
         else {
             $('.navbar').removeClass('navbar-fixed-top');
         }
    });

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top - 50}, 1500, 'easeInOutExpo');
    event.preventDefault();
});
});

Any help would be appreciated

Answer 1

Use this code: should work properly and has nice smooth scrolling effect:

   $(document).ready(function(){
   var offset = $(".navbar").offset().top;     
   $(window).scroll(function() {
         if ($(window).scrollTop() >= offset) {
             $('.navbar').addClass('navbar-fixed-top');

         }
         else {
             $('.navbar').removeClass('navbar-fixed-top');
         }
    });

 //here it starts
   $('a[href^="#"]').bind('click.smoothscroll',function (e) {
       e.preventDefault();

       var target = this.hash,
           $target = $(target);

       $('html, body').stop().animate({
           'scrollTop': $target.offset().top-90 //change value to your need 
       }, 1200, 'swing', function () {
           window.location.hash = target;
       });
   });
  //end
  });

Answer 2

When you change from relative to fixed positioning, the block value of the div changes from it's height to zero. This causes the offset issue you are experiencing. See this fiddle here: https://jsfiddle.net/7muk9zhh/5/

The main things that have changed:

JS:

$(window).scroll(function() {
    if ($(window).scrollTop() >= offset) {
        $('.navbar').addClass('navbar-fixed-top');
        $("#Main").css("margin-top", $(".navbar").height()); //Compensates for fixed positioning
    } else {
        $('.navbar').removeClass('navbar-fixed-top');
        $("#Main").css("margin-top", "");
    }
});

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        var globOffset = $(".navbar").height(); //Acts as an offset for the fixed element
        $('body').stop().animate({scrollTop: $($anchor).attr('href').offset().top - globOffset}, 1500);
        event.preventDefault();
    });

HTML:

There is one more problem. The "#home" anchor is used in body. So when finding the offset top for this, it returns 0 (offset of the body element).

Also I think the custom easing 'easeInOutExpo' requires jQuery UI (if that isn't working you need to include it):

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Hopefully this answers your question!