CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jimmy
Jimmy

Reputation: 12517

Glitchy javascript persistent header implementation

I have this code: http://jsfiddle.net/KCb5z/7/

It is designed to allow me to click links on the yellow bar and also have it be pesistent. It seems to work for the most part but on transition scrolling down it glitches around the part where the yellow bar becomes persistent at the top of the page.

I believe it is this bit of code which is causing it:

var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;

$window.scroll(function () {
    var currentScrollTop = $window.scrollTop();
    if (currentScrollTop > init && isFixed === false) {
        isFixed = true;
        $select.css({
            top: 0,
            position: 'fixed'
        });
    } else if (currentScrollTop <= init && isFixed === true) {
        isFixed = false;
        $select.css('position', 'relative');
    }
});

Is it obvious what is causing the issue, because if you scroll all the way down to the bottom it works fine.

Upvotes: 0

Views: 41

Answers (1)

graphicdivine
graphicdivine

Reputation: 11221

The glitching seems to be caused by the document re-flowing when the select element changes state from relative to static, and vice versa. You need to find a way to stop the re-flow, either by leaving a placeholder element to occupy the space left when the element is removed from the flow (a duplicate element with visibility:hidden perhaps), or by making sure it doesn't affect the document flow in the first place.

Upvotes: 1

Related Questions