Fixed element on scroll without knowing the scrollTop() position

Question

I want to have a fixed header at the top of the screen without knowing the scrollTop() position because it's variable (the header has an element above with variable height).

I save the value of the vertical separation in a variable thanks to offset().top , the problem is that this value turns to 0 when the header is fixed at the top. So I can't remove the class I added before.

var win = $(window);

win.on('load scroll resize', function(){
    var header  = $('#header-v1'),
        ht      = header.offset().top, // Get the offset from the top
        st      = win.scrollTop(),
        height  = ht - st; // Get the offset from the top of the viewable screen

    var get_h = 1,
        j;

    if (st <= ht) {
        for (j = 0; j < height; j++) {
            get_h += 1;
        }
    } else if (st >= get_h) {
        header.addClass("fixed-nav");

    } else {
        header.removeClass("fixed-nav");
    }

});

I wanted to make a counter to recover the header.offset().top value, because it's 0 after scrolling down the page. Still I'm not sure if this is the way. Any suggestions?

EDIT: The following code should work. It's an adaptation from this one . But still I'm having the same issue: the class is not removed.

var win     = $(window),
    header  = $('#header-v1'),
    ht      = header.offset().top;

win.on('scroll', function(){
    var st      = win.scrollTop();
        ht      = header.offset().top;

    if (st >= ht) {
        header.addClass("fixed-nav");
    } else if (st < ht) {
        header.removeClass("fixed-nav");
    }
});

Answer 1

I could fix it by myself thanks to the jQuery function one() .

var win     = $(window),
    header  = $('#header-v1');
    var ht;

// Get the offset from the top into another scroll event
// ... using the function "one()".
win.one('scroll', function(){
    ht  = header.offset().top;
});

win.on('scroll', function(){
    var st = win.scrollTop();
    if (st >= ht) {
        header.addClass("fixed-nav");
    } else if (st < ht) {
        header.removeClass("fixed-nav");
    }
});

Actually, over the header I have a topbar with a button that displays more content with the function slideToggle() . So the height from the top changes after every click (show/hide content with variable height), and this is the solution:

win.on("load resize",function(){
    // Get the offset
    win.one('scroll', function(){
        ht  = header.offset().top;
    });

    $(".navbtn").toggle(function() {
        // The user clicks to show more content, get the offset again
        win.one('scroll', function(){
            ht  = header.offset().top;
        });
    }, function () {
        // Get the offset again when the content is hidden
        win.one('scroll', function(){
            ht  = header.offset().top;
        });
    });
});

The code is running here: jsfiddle . Try changing the height of the topbar in the CSS and see how the menu is fixed at the top using the determined offset.