Navbar with dropping sections link

Question

I am working on a navbar which has the links drop when active. Everything works on .click, but in .scroll my active setting are all working except changing the active ink color. Any help would be appreciated.

Here is my jsfiddle link. http://jsfiddle.net/carincamen/hsu9jj0q/34/

$(document).ready(function($){
      var parPosition = [];
    $('.par').each(function() {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

        $('nav .navbar ul li a').click(function () {
        $('nav .navbar ul li a').removeClass('active');
            $(this).addClass('active');   
    }); 

       $(document).scroll(function(){
    var position = $(document).scrollTop(),
            index; 
            for (var i=0; i<parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }

        }
  $('nav .navbar ul li a').removeClass('active');
        $('nav .navbar ul li a:eq('+index+')').addClass('active');
    });

        $('nav .navbar ul li a').click(function () {
        $('nav .navbar ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

score 0 · Answer 1 · answered Jun 16 '15 at 01:22

0

I have not done jquery myself, but I have used the editor Netbeans, and it may make designing better? Not sure. I suggest trying it out: https://netbeans.org/kb/docs/web/js-toolkits-jquery.html

answered Jun 16 '15 at 01:22

GraniteBear

31
2
7

Thank you, I will have to take a look at it. I have not heard about Netbeans before. – Carin Camen Jun 16 '15 at 01:55

score 0 · Answer 2 · edited May 23 '17 at 11:43

I found the solution to the issue, it was a relatively easy fix. When using bootstrap, you have to override some of their css to customize. To do this, you have to make sure that you have a higher point system. In my case, .active was lower than bootstraps css. By adding .nav ul li a to the .active, it provided a higher point system to override bootstrap.

http://jsfiddle.net/carincamen/hsu9jj0q/

.nav ul li a.active {
color: rgb(207,219,218);
text-transform: uppercase; 
top: 15px;

}

Here is the link to the post by kaizer1v that explains the point system to override bootstrap.

https://stackoverflow.com/a/20542297/4313248

Navbar with dropping sections link

2 Answers2