CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Baivaras
Baivaras

Reputation: 438

Navigation menu scroll down with different heights

I have website and I want to make scroll down button and navigation menu (In fiddle only with circle button). But I have problem with height. I know that I can subtract it from anchor target.offset.top, but my navigation menu isn't same height on toggle.

For example normal navigation menu is 125px height, I need to substract 125px, but what I need to do if my toggle navigation menu is 90px height?

I made transparent navigation and blue background for content that you can see better the question.

Here is my fiddle example:

https://jsfiddle.net/DTcHh/17740/

Upvotes: 0

Views: 83

Answers (1)

Marian Rick
Marian Rick

Reputation: 3430

You could change your second jQuery part and calculate the needed scroll height like this:

$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        // store offset().top in a var
        var $anchor_scroll = $($anchor.attr('href')).offset().top;
        // calculate offset().top - 90px
        var $anchor_scroll_calc = $anchor_scroll - 90; 
        $('html, body').stop().animate({
            scrollTop: $anchor_scroll_calc
        }, 1500);
        event.preventDefault();
    });
});

JSFIDDLE DEMO

Next you could use .hasClass to check wether the .navbar-fixed-top is collapsed or not and use a if {} else {} function inside the calculation:

if( $('.navbar-fixed-top').hasClass('top-nav-collapse')) {
  var $anchor_scroll_calc = $anchor_scroll - 90; 
} else {
  var $anchor_scroll_calc = $anchor_scroll - 120; 
}

JSFIDDLE DEMO

Upvotes: 2

Related Questions