MainMenü beim scrollen verändern?

SwPotsdam · Jun 25th 2017

Hi,

vielleicht kann mir hier jemand weiterhelfen. Mein Main Menü ist transparent und soll beim scrollen einer höhe die Farbe vom Hintergrund ändern.

Ich habe dazu diesen Code in das headinclude Template gepackt.

Code

<script type="text/javascript">
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            $(".pageHeaderPanel").addClass("scrolling");
        } else {
            $(".pageHeaderPanel").removeClass("scrolling");
        }
    });
</script>

Display More

Es tut sich aber nichts.

Normal müsste sich doch das scrolling an die Klasse hängen und diese sollte man auch in der Entwickleransicht im Brwoser sehen oder?

Gino Zantarelli · Jun 26th 2017

das Script arbeitet nicht unter einigen Browsern, nutze anstatt dieses:

Code

 <script data-relocate="true">
function resizeHeaderOnScroll() {
  const distanceY = window.pageYOffset || document.documentElement.scrollTop,
  shrinkOn = 50,
  headerEl = document.getElementById('pageHeader'); 
  if (distanceY > shrinkOn) {
    headerEl.classList.add("smaller");
  } else {
    headerEl.classList.remove("smaller");
  }
}
window.addEventListener('scroll', resizeHeaderOnScroll);
</script>

Display More

Das Script fügst du in das template "header" ein (Zeile 2), beachte das das template in der Templategruppe deines Stils ist.

Um nun per CSS in deinem genutzen Stil den Hintergrund einzufärben, nutze folgenden Code:

Code

.pageHeader.smaller .mainMenu {
    background-color: #f00;
}

SwPotsdam · Jun 26th 2017

Danke, damit kann ich jetzt arbeiten.

MainMenü beim scrollen verändern?

Participate now!

Share