Glitchy javascript persistent header implementation

Question

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.

What browser? Looks fine for me on Chrome 34. Also, you might want to update scrollTop on nav click to scrollTop: $(divId).offset().top - $select.height() to make sure you offset the height of the navbar and the user can see the top of the section — CodingIntrigue
– CodingIntrigue, Commented May 12, 2014 at 10:27
I'm using Chrome too. It's shown by either dragging the right slider bar up and down, or instead if you click several times on "posting" on the yellow bar it goes a bit haywire. Using the mouse wheel seems to hide the glitch — Jimmy
– Jimmy, Commented May 12, 2014 at 10:31
@RGraham If I do as you suggest I get a brown gap at the top of the yellow bar when I click on "posting": jsfiddle.net/2vY6G Do you know how to fix that? — Jimmy
– Jimmy, Commented May 12, 2014 at 10:48

graphicdivine · Accepted Answer · 2014-05-12 11:47:43Z

1

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.

answered May 12, 2014 at 11:47

graphicdivine

11.3k7 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Glitchy javascript persistent header implementation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related