Jump to content

Welcome to Fundayforum

Welcome to Fundayforum

Take the free tour and meet people! 😍

Things are going to change

Things are going to change

This year you must stay, you deserve it.

When you think things go wrong

When you think things go wrong

There is always someone who will give you a hand.

Where are you going tonight?

Where are you going tonight?

Some day we'll go back there, our secret place.

Do you remember those moments?

Do you remember those moments?

This is going to get sweet!

I really feel younger.

I really feel younger.

Maybe I'll give it a little taste.

Oh pretty mama, you're the best!

Oh pretty mama, you're the best!

I do not think I'll ever forget it, thanks.

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,975
    Total Topics
    8,202
    Total Posts
×