CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leo
Leo

Reputation: 977

Header fixed only when its top reached the top of the window

I have a div with the class .fullscreen, this class is associated to a small JavaScript function that will make that div appear as full-screen. "i.e the width and height of the div.fullscreen will be 100%".

//Fullscreen
$(window).on("ready resize", function () {
    if ($(window).width() > 1024) {
        var newHeight = $("html").height() - $("#header").height() + "px";
        $(".fullscreen").css("height", newHeight);
    } else {
        $(".fullscreen").css("height", "auto");
    }
});

So, the height and width is not fixed, and it is calculated dynamically according to the diminutions of the window.

Under that div, there is another one that has the ID header "navigation bar", the header is initially positioned relatively under div.fullscreen - however, I am trying to position it as Fixed when the top of the #header reaches the top of the browser window.

So here is what I am playing around, it toggles the Fixed style, but it does not toggle it at the right place...

var offset = $('#header').offset();
$(window).scroll(function () {
    $('#header').addClass('fixed-nav');
    if ($(document).scrollTop() < 150) {
        $('#header').removeClass('fixed-nav');
    }
});

so, I have tried to integrate (var newHeight = $("html").height() + "px";) the following to it, but no hope:

var newHeight = $("html").height() + "px";
var offset = $('#header').offset();
    $(window).scroll(function () {
        $('#header').addClass('fixed-nav');
        if ($(document).scrollTop() < newHeight) {
            $('#header').removeClass('fixed-nav');
        }
    });

LIVE example of the problem: http://loai.directory/martin/

Upvotes: 0

Views: 3483

Answers (1)

Albert Xing
Albert Xing

Reputation: 5788

You only want to add the fixed-nav class when you have scrolled past the .fullscreen div. For example:

$(window).on('scroll', function () {
    if ($(window).scrollTop() >= $(window).height())
        $('.nav').addClass('fixed');
    else
        $('.nav').removeClass('fixed');
});

I've used $(window).height() here since we know that .fullscreen has height equal to that of the window, but we could also use $('.fullscreen').height(). Note that we cannot use $('.nav').offset().top since this offset will not provide the correct number after the nav becomes fixed.

See this JSFiddle.

You'll also want to add various resize listeners to handle changes when the window is resized.

Upvotes: 1

Related Questions