Jump to content

Please Disable Your Adblocker. We have only advertisement way to pay our hosting and other expenses.  

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,834
    Total Topics
    8,139
    Total Posts
×