Jquery smoothscroll vs dynamic height

Question

i created a personal website where i want to use smoothscroll script. Everything is working fine but i want to change height of header when u click on something from.

Here comes my problem.... I think smoothscroll calcute height of document and then I click on menu and header is minimized, smoothscroll scrolled to the position what he calculated before.

So it is 500px behing right position. How to deal with that?

You can seen this website.

You can see header html, my javascript and css I tried www.jsfiddle.net/brxoekdm/

Thanks for every idea how to solve it.

Answer 1

Hum, ideas we aways have!

If the problem is the position change, than bind the scroll to one element instead of a fixed pixel;

let's say in your menu you are have button with I don't know, class: 'menu-item':

Assuming

<img class="menu-item" data-target="#my-target-selector"/>

so:

var menuSelector

menuSelector = $('.menu-item');
menuSelector.on('click', function(event){
    event.preventDefault();

    var $self, target;
    $self = $(this);
    target = $self.data('target');
    // Go
    $.smoothScroll({
        scrollTarget: target
    });
});

This is just one idea of how to solve it :) Elements may have their offset recalculated by the window everytime they change, it's native. So it is safer to rely on it.

Oh and I supose you are talking about this smoothscroll: https://github.com/kswedberg/jquery-smooth-scroll

Cheers!

---- Update

After I took a look at your website I understood. The "problem" is the order of the actions.

You are hiding the header, transforming it in a mini header at the same time the scrolling is calculated, in this case you should use a callback and scroll after you hide the header, or use another css feature to achieve the mini header.

As I deal better with Javascript let's create one idea for you :)

Here I changed a little but the main idea of the flow is: Hide your header first and then scroll down.

I took the function from your core.js file

var menuSelector, hideHeader, showHeader, $window, $header, $head;

$window = $(window);
$header = $(".header-top");
$head = $("header");


hideHeader = function(next){
    $header.removeClass('.header-top').addClass("fixed");
    $head.addClass("mini");
    if(next !== undefined){
        next();
    }
};

showHeader = function(next){
    $header.removeClass("fixed").addClass('.header-top');
    $head.removeClass("mini");
    if(next !== undefined){
        next();
    }
};

$window.scroll(function() {
    var scroll = $window.scrollTop();
    if (scroll >= 40) {
        hideHeader();
    } else {
        showHeader();
    }
});

menuSelector = $('.menu-item');
menuSelector.on('click', function(event){
    event.preventDefault();
    var $self, target;
    $self = $(this);
    target = $self.data('target');
    // Let's hide first and scroll later
    hideHeader(function(){
        $.smoothScroll({
            scrollTarget: target
        });
    })
});