Support » Plugin: Smart Slider 3 » Conflict when hiding navbar when scrolling

  • Resolved nicoidolo

    (@nicofanjul)


    Hello, I am trying to use a simple w3school code that allows me to hide my navbar when scrolling down the site.

    
    <script>
    /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("masthead").style.top = "0";
      } else {
        document.getElementById("masthead").style.top = "-150px";
      }
      prevScrollpos = currentScrollPos;
    }
    </script>
    

    The problem is that when smart slider 3 is loaded, the navbar resets and acts as if I have scrolled, so it sets the CSS to “top = -150px” …

    When I try to test the site without smart slider, the hidden navbar style works fine.

    Is there some sort of conflict here?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Gabor

    (@nextendweb_gabor)

    Hi @nicofanjul!

    The problem you see happens, because for some calculations we need to trigger the scroll event of the page, which triggers your code, just when you are on top of your page, this part of the code:
    prevScrollpos > currentScrollPos

    has these values:
    0 > 0

    which fails and instead of top:0, the -150px is used. You should modify your code to still have 0 top value, when you are on the very top of your page:
    if (prevScrollpos > currentScrollPos || currentScrollPos == 0) {
    and it should be fine!

    All together:

    <script>
    /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos || currentScrollPos == 0) {
        document.getElementById("masthead").style.top = "0";
      } else {
        document.getElementById("masthead").style.top = "-150px";
      }
      prevScrollpos = currentScrollPos;
    }
    </script>
    Thread Starter nicoidolo

    (@nicofanjul)

    Thank you, this solved the issue so far.

    jcfromkc

    (@jcfromkc)

    Thank you!! This worked for me as well.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Conflict when hiding navbar when scrolling’ is closed to new replies.