Docs

[TactikMedia]

Hello,

I am trying to make a sticky section appear at the top of one of my pages. I have found the following post (https://community.theme.co/forums/topic/fixed-section/) on how to make it work but at some point the sticky section starts to flicker at some point when we scroll down, as if the if/else condition was entered a couple of times in a simple scroll.

I have tried to debug the jQuery myself but no dice. Here’s the code I currently have :

CSS

.x-section.fixed-section {
    margin: 0px;
    padding: 0px;
    visibility: visible;
    position: fixed;
    z-index: 1;
    display: inline;
    width: 100%;
    top: 30px !important; 
}

jQuery

jQuery(function($){
  $(window).scroll(function(){
    var navbarHeight = $('.x-navbar').height() + $('.x-topbar').height() + $('#wpadminbar').height() + 0;
    if( $(this).scrollTop() >= $('.x-main').offset().top - navbarHeight && $(window).width() > ( $('#fixed-sec').offset().top - navbarHeight ) ) {
      $('#fixed-sec').addClass('fixed-section').css({ top: 0 });
    } else {
      $('#fixed-sec').removeClass('fixed-section');
    }
  })
});

[TactikMedia]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing us in! Please have your JS code updated and make use of this code instead:

jQuery(function($){
  $(window).scroll(function(){
    var navbarHeight = $('.x-navbar').height() + $('.x-topbar').height() + $('#wpadminbar').height() + 0;

    console.log($('#fixed-sec').offset().top);
    if( $(this).scrollTop() >= $('.x-main').offset().top && $(window).width() > $('#fixed-sec').offset().top ) {
      $('#fixed-sec').addClass('fixed-section').css({ top: 0 });
    } else {
      $('#fixed-sec').removeClass('fixed-section');
    }
  })
});

Please let us know if this works out for you.

[TactikMedia]

I have updated the JS code but the fixed section keeps flickering once I reach the middle of the page and lower.

Edit : figured out it is to debug actually

[Lely]

Glad you were able to figure this out.

Cheers!

[TactikMedia]

Uh? Problem clearly is not figured out yet…

[Rue Nel]

Hello There,

Thanks for updating in! Please have the JS code updated and use this instead:

jQuery(function($){
  $(window).scroll(function(){
    var navbarHeight = $('.x-navbar').height() + $('.x-topbar').height() + $('#wpadminbar').height() + 0;

    console.log($('#fixed-sec').offset().top);
    if( $(this).scrollTop() >= $('.x-main').offset().top && $(window).width() > $('#fixed-sec').offset().top ) {
      $('#fixed-sec').addClass('fixed-section');
    } else {
      $('#fixed-sec').removeClass('fixed-section');
    }
  })
});

Please let us know how it goes.

[TactikMedia]

Hello, I have updated the code but the problem still occurs.

[Christian]

Please remove all the code given previously and use a plugin like https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

Please take note though that since this is a third party plugin, issue arising from the use of it or further modification is outside the scope of our support.

Thanks.

[TactikMedia]

Thanks Christian, the plugin worked fine.

[Christian]

You’re welcome.

[Author]

Posts