CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jacob
Jacob

Reputation: 7

Keep text in place after header moves back to top the page

I have a sticky header that has a button appear after the user scrolls a little bit. When you click the button, the header moves back up to the top of the page, but the text moves down. How do I keep the text in place after I click the button.

Also, how do I make sure that the text doesn't double the amount of margin between the text and the header after the header moves back to the top. Its somewhat hard to explain, but you can see for yourself. I tried to use <br>, but that doesn't work.

var closed = false;

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 55 && !closed) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }

});
$("div.bottomMenu").on('click', function(){
    $('#header').css('position','static');
    $('div.bottomMenu').hide();
    closed = true;
});

Example fiddle

Upvotes: 0

Views: 85

Answers (1)

DaniP
DaniP

Reputation: 38252

Don't change the position to static use absolute to keep the header out of the flow:

$('#header').css('position','absolute');

The demo http://jsfiddle.net/ZyKar/709/

Upvotes: 1

Related Questions