Bootstrap滚动导航栏问题

Question

The website I'm working on: zarwanhashem.com

You can find my previous question (which includes my code) here: Bootstrap one page website themev formatting problems

The selected answer solved my issues but I have another problem because of the jQuery adjustment with the -50. Now the navbar incorrectly indicates the page I am on. ie The navbar is supposed to darken the section that you are currently in. So if you click "about" it will take you to the about page and darken the about link in the navbar. But the link BEFORE the page you are on is highlighted because the -50 makes the navbar think that it is on the previous section. You can easily try this to see what I mean.

How can I fix this? Thanks. The reason I didn't add this onto my old question is because the person stopped looking at it.

Also please keep your explanations simple/dumb them down a little for me. I know very basic HTML and CSS, and I don't know any Javascript.

scrolling js:

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('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();
    });
});

js added at end of document as suggested by poster in previous question:

$(window).ready(function(){
    $('div[class^="content-section"]').css('min-height', $(window).height());
    })

Answer 1

You are putting the .active class on the wrong element somehow. You need to put the .active class on the clicked element. You should handle the active state with js. This is my solution based on your HTML structure but I'm sure there are different solutions as well.

$(document).on('click', '.page-scroll', function(event) {
   var clicked = event.target; //get the clicked element
   if($(clicked).closest('ul').hasClass('dropdown-menu')){ //check if clicked element is inside dropdown
      $(clicked).closest('ul').parent().siblings().removeClass('active'); //remove active class from all
      $(clicked).closest('ul').parent().addClass('active'); add active class on clicked element parent - in your case <li> tag.
   }else{
      $(clicked).parent().siblings().removeClass('active');
      $(clicked).parent().addClass('active');
   }
}

Let me know if this works for you.

EDIT after you posted your code

Try replacing your function with this:

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

        if($($anchor).closest('ul').hasClass('dropdown-menu')){
           $($anchor).closest('ul').parent().siblings().removeClass('active'); 
           $($anchor).closest('ul').parent().addClass('active'); 
        }else{
           $($anchor).parent().siblings().removeClass('active');
           $($anchor).parent().addClass('active');
        }
        event.preventDefault();
    });
});

Answer 2

here is a work around this problem. just change the contents of your scrolling-nav.js to the following:

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top -50
    }, 1500, 'easeInOutExpo', function(){
        $('ul.navbar-nav li, ul.dropdown-menu li').removeClass('active');
        $($anchor).parent('li').addClass('active');
    });
    event.preventDefault();
}); 
});