block collant en dessous du menu collant

Hey sebzh22,

Could you post a link to where we can see the element in question please?

Best regards,
Rikard

Hi,
Merci pour le lien vers votre site, pour faire coller votre section couleur “barre de menu” sous le header on scroll j’ai ajouté le script et css suivant à votre thème enfant, et dans mes tests la “barre de menu” avec la classe personnalisée” collant” se collerait dès qu’il toucherait l’en-tête. Pour les mobiles, sous 990px, puisque l’en-tête n’est pas collant, ce script ferait coller la “barre de menu” en haut de l’écran. Cela a bien fonctionné dans mon test en injectant le code via le navigateur.
Mais lorsque j’ai ajouté ceci dans votre thème enfant, la hauteur du défilement n’est pas correcte, il ne colle donc pas jusqu’à un défilement beaucoup plus loin, peut-être que cela a à voir avec votre mise en cache, alors laissez-le en place, veuillez essayer d’effacer ou de désactiver votre cache et vérifiez la page.

— Translated with Google —

Thank you for the link to your site, to make your color section “menu bar” stick under the header on scroll I added the following script and css to your child theme, and in my tests the “menu bar” with the custom class “collant” would stick as soon as it touched the header. For mobile, under 990px, since the header is not sticky this script would make the “menu bar” stick at the top of the screen. This worked well in my test by injecting the code via the browser.
But when I added this into your child theme the height of the scroll is not correct so it doesn’t stick until a much further scroll, perhaps this has to do with your caching so left it in place, please try clearing or disabling your cache and check the page.

this function in your child theme functions.php

function custom_collant_script() { ?>
    <script>
(function($){
  $(function() {       
     var scroll_start = 0;
     var startchange = $('.avia-section.collant');
     var offset = startchange.offset();
     var width = $(window).width()
      if (startchange.length){
     $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if ((width >= 990)) {
        if(scroll_start > offset.top - 117) {
          document.querySelector('.avia-section.collant').classList.add('sticky-top');
         } else {
          document.querySelector('.avia-section.collant').classList.remove('sticky-top');
         }
        }
        if ((width < 989)) {
        if(scroll_start > offset.top) {
          document.querySelector('.avia-section.collant').classList.add('sticky-top-mobile');
         } else {
          document.querySelector('.avia-section.collant').classList.remove('sticky-top-mobile');
         }	
        }
     });
      }
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_collant_script');

and this css

.sticky-top {
    position:fixed!important;
    top:117px!important;
    z-index:600!important;
}
.sticky-top-mobile {
    position:fixed!important;
    top:0!important;
    z-index:600!important;
}

Best regards,
Mike

Hi,
Thanks for the feedback, for this to only work on desktop I adjusted the script in your child theme functions.php to:

function custom_collant_script() { ?>
    <script>
(function($){
  $(function() {       
     var scroll_start = 0;
     var startchange = $('.avia-section.collant');
     var offset = startchange.offset();
     var width = $(window).width()
      if (startchange.length){
     $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if((width >= 990) && (scroll_start > offset.top - 117)) {
          document.querySelector('.avia-section.collant').classList.add('sticky-top');
         } else {
          document.querySelector('.avia-section.collant').classList.remove('sticky-top');
         }
     });
      }
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_collant_script');

and the child theme css to:

.sticky-top {
    position:fixed!important;
    top:117px!important;
    z-index:600!important;
}

Please try disabling your Cloudflare & LiteSpeed Cache and leave it disabled as it may take a few hours for the cache to clear.
I would like to check again later the cache disabled.

Best regards,
Mike

Hi,
Thank you for the feedback, I adjusted it so it will wait for the page to fully load before the calculations, I think the lazy load images were affecting the calculations.
Please clear your browser cache and check, and note that it won’t work on screens below 990px, as above you asked for it to not work on mobile.
Please note that if you are testing with Safari it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Heureux d’entendre que cela a aidé, le script rend la section de couleur avec la classe personnalisée “collant” collante, vous pouvez modifier les éléments à l’intérieur de la section de couleur et cela fonctionnera toujours de la même manière.

— Translated with Google —

Glad to hear that this helped, the script makes the color section with the custom class “collant” sticky, you can change the elements inside the color section and it will still work the same.

Best regards,
Mike

Hi,
Your can make your header not sticky at Enfold Theme Options ▸ Header ▸ Header behavior ▸ Sticky Header there is also a setting for Shrinking Header.

Best regards,
Mike

Hi,
Thanks for the feedback, I changed your css to this:

.sticky-top {
    position:fixed!important;
    top:0!important;
    z-index:600!important;
}
.sticky-top-added {
  position: fixed !important;
  top: -85px;
  width: 100%;
  z-index: 999;
  opacity: 0;
  background: #fff;
  transition: 0.3s all;
}

and changed the script to this:

function custom_collant_script() { ?>
    <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $(function() {       
     var scroll_start = 0;
     var startchange = $('.avia-section.collant');
     var offset = startchange.offset();
     var width = $(window).width()
      if (startchange.length){
     $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if((width >= 990) && (scroll_start > offset.top - 85)) {
          document.querySelector('.avia-section.collant').classList.add('sticky-top');
          document.querySelector('#header_main').classList.add('sticky-top-added');
         } else {
          document.querySelector('.avia-section.collant').classList.remove('sticky-top');
          document.querySelector('#header_main').classList.remove('sticky-top-added');
         }
     });
      }
  });
})(jQuery);
});
</script>
    <?php
}
add_action('wp_footer', 'custom_collant_script');

Now when the color section “collant” reaches the header the header hides and the color section sticks to the top of the screen.
Please note that if you are logged in and the admin bar is showing at the top the color section looks like it is under the admin bar, so please test not logged in and you will see that the color section is at the top of the screen.
Please clear your browser cache and check.
Please note that if you are using Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Thanks for the feedback, I checked the page linked below on a mobile phone and did not find anything sticky, the code above is written so that it will only be sticky on screens above 990px, if you are seeing this on an iPad try changing the line:
if((width >= 990) && (scroll_start > offset.top - 85)) {
to:
if((width >= 1440) && (scroll_start > offset.top - 85)) {
if you are testing on a desktop screen and changing the width of the browser window to emulate a mobile phone (425px) then please reload the page before testing because the screen width is determined on the page load.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike