Sticky scroll navigation with bottom navigation

Question

I'm basing my project on an already existing code, so in general it shouldn't be hard. I think.

This is the example I'm basing myself on: Sticky Scroll

    function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

I've got the script to work with my navigation bar. Only thing is that my navigation bar is located at the bottom of the homepage.And it should stay there until it touches the top when scrolling.

What I have so far is: testpage

Now the last one state my page like I wanted when you view it first. I'd tried few things and got the code to work but without my nav positioned at the bottom, this I can not get to work.

My guess is that I have to change something in the Jquery script.

my aim is to get something like the seattle cider company navigation but the main page should have the nav in the bottom.(no link because I'm new here) (also searched the forum's If their where any solution but didn't find one that solves mine)

Answer 1

Move your nav below the first section that appears and give that section the window height using JQuery. Then simply apply your sticky menu code and it should work fine.

See this Fiddle

(function() {
    //set the height of your section which makes sticky sit below it
    // windowHeight alone will push it outside the window so do
    //window height - whatever height your nav is
    var winHeight = $(window).height(); 
    $('section').css('height', winHeight - 60 + 'px');


    //Your sticky relocate code    
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            $('#sticky').addClass('stick');
        } else {
            $('#sticky').removeClass('stick');
        }
    }

     $(window).scroll(sticky_relocate);


})();