Contact

mail@gemini-theme.com
+ 001 0231 123 32

Follow

Info

All demo content is for sample purposes only, intended to represent a live site. Please use the RocketLauncher to install an equivalent of the demo, all images will be replaced with sample images.

Sticky Menu

This effect is at work at StB-StL

Apply following class to hide elements when they go above the threshold 
hiddenonscroll
Javascript to add to Template Assets

Load Priority 10 

<script>
window.addEvent('domready', function(){
  window.onscroll = function() {setToSticky()};
      var navbar = document.getElementById("g-top");
      var sticky = navbar.offsetTop + 100;
        // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function setToSticky() {
          if (window.pageYOffset > sticky) {
            navbar.classList.add("sticky")
          } else {
            navbar.classList.remove("sticky");
       }
   }
});
</script>
Alternative Javascript to add to Template Assets
<script>
window.addEvent('domready', function(){
  window.onscroll = function() {setToSticky()};
      var navbar = document.getElementById("g-navigation");
      var sticky = navbar.offsetTop;
        // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function setToSticky() {
          if (window.pageYOffset > sticky) {
            navbar.classList.add("sticky")
          } else {
            navbar.classList.remove("sticky");
       }
   }
});
</script>
For override CSS

To keep the menu at the top before the scrolling down happens on the homepage. 

.homelayout #g-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
}
Alternative CSS 
#g-navigation.sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
}