Jump to content
Sign in to follow this  
ADMIN

Fixed navigation on scroll

Rate this topic

Recommended Posts

We create a clone of menu for scroll with this own parameter

In "globaltemplate" search :

{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

Add below :

<script>
        // Create a clone of the menu, right next to original.
$('.ipsNavBar_primary').addClass('original').clone().insertAfter('.ipsNavBar_primary').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}
      </script>

if you don't use the "more" item menu, add in custom css :

li#elNavigationMore {
    display: none;
}

This modification is for default theme but you can use on all theme, just change the class menu use in script by your ! in this exemple we use :  ".ipsNavBar_primary" (care ! the script use this balise two times).

And show if you have script in footer too :

fixed_scroll_menu_titcrea_01.PNG.6a73e89994ac9d2f3dbbfafc59745f28.PNG

fixed_scroll_menu_titcrea_02.PNG.883ea9000813c62ef7b8d5505ff128ce.PNG

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Forum Statistics

    1,932
    Total Topics
    8,055
    Total Posts
×