0

My header/menu is flickering on scrolling down till the "point of shrinking" (in my example on 300px). I've tested different heights but every time I came to "the point" it's flickering because it's adding and deleting the class "small".

 /* === Shrink Header on Scroll === */

var header = $('.site-header');

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if ( scroll >= 300 ) {
        header.addClass('small');
    }
    else {
        header.removeClass('small');
    }
});

I can produce this flickering only on Chrome and with slow scrolling (Version 86.0.4240.111)

Lara
  • 41
  • 1
  • 10
  • Did you check if there is any other code that adds the "small" class ? It is not possible that the shown code adds the class small and then removes it, these conditions are mutual exclusive. – Lapskaus Oct 30 '20 at 09:23
  • @Lapskaus I can't find any other code that adds this class. Heres the Page: http://192.168.1.106:3000 Only the logo is shrinking and the paddings ... probably because the shrinking means that the scroll distance no longer fits? ... – Lara Oct 30 '20 at 09:32
  • i won't be able to look at a page on your local machine – Lapskaus Oct 30 '20 at 09:34
  • @Lapskaus oh ups. Sorry wrong link... https://boes.concept-design-heumann.de/ – Lara Oct 30 '20 at 09:40
  • works as intended on the link you provided. Try to reload the local page with [CTRL] + [F5] to override cached scripts – Lapskaus Oct 30 '20 at 09:48
  • @Lapskaus I also tested the current status again in different browsers. It's flickering only in Chrome. (and on slow scrolling) – Lara Oct 30 '20 at 09:54
  • Try to add a condition to your else. Sth like `else if (scroll < 280)` to create an offset between the two conditions. – Lapskaus Oct 30 '20 at 10:01

0 Answers0