Good day. The essence of the problem. There is a code when resizing the browser window as well as when scrolling some css properties change. The problem is that when reducing the width of the browser from 768 or more to a size less than 767 and simultaneously scrolling, the lower part of the code is not executed

else{ $(".wrapper_nav").css('position','relative'); $(".logo_dark").css('display','block'); $(".logo").css('display','none'); };

Here is the whole code

  $(window).resize(function(){ var width = document.documentElement.clientWidth; if (width > 767) { $(".wrapper_nav").css('position','fixed'); $(".list_mobnav").css('display','none'); $('.wrapper_nav').removeClass("wrapper_nav-white"); $(window).scroll(function(){ if ($(window).scrollTop() > 20 ){ $(".wrapper_nav").addClass("wrapper_nav-white").fadeIn('fast'); $(".logo_dark").css('display','block'); $(".logo").css('display','none'); $(".parent_item-big").css('color','black'); } else { $(".wrapper_nav").removeClass("wrapper_nav-white").fadeIn('fast'); $(".logo_dark").css('display','none'); $(".logo").css('display','block'); $(".parent_item-big").css('color','white'); }; }).trigger('scroll'); }else{ $(".wrapper_nav").css('position','relative'); $(".logo_dark").css('display','block'); $(".logo").css('display','none'); }; }).trigger('resize');

    1 answer 1

    The code is written in a very strange way.

    1. When resizing a window, the handler hangs for a runner (it’s not right to do this, because dozens of such handlers hang from you for one window border movement)
    2. Why hang the event and immediately trigger the event? .trigger('scroll')

    Corrected your code, try running. It may work

     // Π°Π»Π³ΠΎΡ€ΠΈΠΌΡ‚ дСйствий ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠΊΠ½Π° function onResize() { var width = document.documentElement.clientWidth; if (width > 767) { $(".list_mobnav").css('display','none'); $(".wrapper_nav") .removeClass("wrapper_nav-white") .css('position','fixed'); } else { $(".wrapper_nav").css('position','relative'); $(".logo_dark").css('display','block'); $(".logo").css('display','none'); } } // Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ Π½Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ function onScroll() { if ($(window).scrollTop() > 20) { $(".wrapper_nav").addClass("wrapper_nav-white").fadeIn('fast'); $(".logo_dark").css('display','block'); $(".logo").css('display','none'); $(".parent_item-big").css('color','black'); } else { $(".wrapper_nav").removeClass("wrapper_nav-white").fadeIn('fast'); $(".logo_dark").css('display','none'); $(".logo").css('display','block'); $(".parent_item-big").css('color','white'); } } // ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π²Π΅ΡˆΠ°ΡŽΡ‚ΡΡ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· $(window).scroll(onScroll); $(window).resize(onResize);

    • The problem has not disappeared. When resizing the window, you need to simulate a scroll so that the styles are updated. Therefore, the scroll trigger is inside the resize. And the main problem was not fixed, it still does not work. - Alexey
    • And also I don’t need to call the onScroll function all the time, but only when the screens are larger than 767. - Alexey