1

Having a weird issue in Chrome with the navbar-brand element of my sites bootstrap navigation menu.

We have a larger site logo displayed in the header section, and a smaller logo within the navbar-brand element of the navbar with display none by default. When scrolling down the page we then affix the navbar to the top of the browser and show() the navbar-brand element. When scrolling back up, the small logo should then hide() as the large logo is then visible.

This works in IE and Firefox without issue, but only partially works in Chrome. The show on scroll down works as does the hide on scroll up, but as you will see, the menu items that shift across for the logo to show, do not shift back when the logo is hidden. If you then click on any of the menu entries, the menu entries shift back to where they should be.

The code in itself is as simple as can be so i dont believe that to be at fault;

$(window).scroll(function () {
    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-brand').show();
    } else {
        $('.navbar-brand').hide();
    }
});

I have a cut down jsfiddle illustrating the issue at https://jsfiddle.net/96jqnu38/3/

I can't seem to suss how to get chrome to redraw/repaint the menu entries back into position.

(Chrome 43.0.2357.81 on Windows 8.1)

Daemonic
  • 65
  • 5
  • You need to debounce. You're calling your script too much. I answered this just today. it's a common question for intermediate javascript developer. http://stackoverflow.com/questions/30577225/parallax-script-gets-laggy-in-chrome-and-on-mobile-devices/30577771#30577771 – Joseph Casey Jun 02 '15 at 02:26
  • Let me know if you have further questions. – Joseph Casey Jun 02 '15 at 02:32
  • 1
    Thanks @JosephCasey i added the debounce at https://jsfiddle.net/96jqnu38/4 but the issue still remains – Daemonic Jun 02 '15 at 10:28
  • Apologies, the scrolling issues is so often the same thing that I jumped to conclusions. – Joseph Casey Jun 02 '15 at 14:04

1 Answers1

0

Ok, your issue is primarily a css issue. You're using a jquery function which gives and inline css attribute to a selected element. Indeed, display:none which is assigned to an element via the .hide method will remove the height and width of an item. However, you're hiding a child element, and you need to be hiding the container element for the css structure to be effected.

jquery

    if ($(this).scrollTop() > $('header').height()) {
        $('.navbar-header').show();
    } else {
        $('.navbar-header').hide();
    }

css

.navbar-brand {
    position: relative;
    padding: 5px 15px;
}
Community
  • 1
  • 1
Joseph Casey
  • 1,283
  • 1
  • 14
  • 34
  • 1
    Your answer worked to a degree that the show/hide and realign worked, but by hiding the navbar-header itself, the reactive menu then didnt change when shrinking the display. But it did make me realise that i could just wrap the anchor in a div with the navbar-brand class, and then move that outside of the header and then my original code works... https://jsfiddle.net/96jqnu38/7/ – Daemonic Jun 02 '15 at 14:39