Docs

[databell]

Sorry for that somewhat condensed subject line. So little room and so much time….

So I have a nav bar on the bottom of the page and as you scroll up, the nav sticks to the top of the page. All good.

Almost.

Problem is the addition of the extra style is triggered upon how far you scroll up. I found right here in the forums, and yes, it does work. But I have to set a number. So if I start scrolling upwards about 300 or so pixels, that nav immediately sticks to the page. Kind of odd. Not awful, but odd.

I’d rather have some kind of listener where the nav sticks once it reaches the top and then it stays there.

So how can I adjust the following code?

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 300) {
      navbar.addClass('stick');
    } else {
      navbar.removeClass('stick');
    }
  });
});

https://jkmurphyadvisors.com/dev/

[Christopher]

Hi there,

Please remove the code and enable ‘fixed top’ position under Customize -> Header.

Thanks.

[databell]

Doesn’t work. If you look at the link I’m providing, the navbar starts at the bottom. Not the top.

https://jkmurphyadvisors.com/dev/

[Rupok]

Hi there,

Thanks for writing back. You need to set “Fixed Top” as stated by Christopher and use the Revolution Slider on on “Above Masthead” to achieve this. The slider could a just a simple single slide with a background image like the existing section. That would be the best approach.

Cheers!

[databell]

I don’t want to use RevSlider and I really don’t want to use a Slider at all since it’s just an image. RevSlider is very faulty and known being compromised often.

[Jade]

Hi there,

Please try this:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
        navbar = $('.x-navbar');

    if (scrollPos > 300) {
      navbar.addClass('stick');
    }
  });
});

[Author]

Posts