[IPB 4][TuT]How to make your navigation menu scroll with you

by Admin - 11-07-2015, 07:45 AM
Novice
Posts:
44
Joined:
Jan 2015
Likes:
3
Credits:
1
Reputation:
0
2 Years of Service
#1
OP
Posted: 11-07-2015, 07:45 AM
Go to ..

Customization > Theme > Edit HTML & CSS > templates > globatTamplate

find..just below </footer>

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

Add below..

Code:
<script>
   $('#elSearchNavContainer').addClass('original').clone().insertAfter('#elSearchNavContainer').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','2000').removeClass('original').hide();
   $('.cloned #elSearch').remove();

   $(document).ready(function() {
       var stickyNavTop = $('#elSearchNavContainer').offset().top;

       window.addEventListener("resize", clone);
       function clone() {
           var test = document.getElementById('elSearchNavContainer').offsetWidth;
           $('.cloned').css('width',test);
       }

       var stickyNav = function(){
           var scrollTop = $(window).scrollTop();

           if (scrollTop > stickyNavTop) {
               $('.cloned').css('display', 'inline');
               $('.original').css('visibility', 'hidden');
               $('.original #elSearch').appendTo('.cloned');
           } else {
               $('.cloned').css('display', 'none');
               $('.original').css('visibility', 'visible');
               $('.cloned #elSearch').appendTo('.original');
           }
       };

       stickyNav(); clone();

       $(window).scroll(function() {
           stickyNav();
       });
   });
</script>

click the Save button

should look like the below image.

[Image: rVFQwIF.png]

Navigation should now move when you scroll down the page.

example:

[Image: XP5qJSl.gif]

Enjoy Smile
GeroX
10-08-2015, 07:45 PM
Novice
Posts:
36
Joined:
Jul 2015
Likes:
5
Credits:
16
Reputation:
0
1 Year of Service
#2
Posted: 10-08-2015, 07:45 PM
Impressive! Thank you so much Smile
Novice
Posts:
36
Joined:
Jun 2015
Likes:
1
Credits:
3
Reputation:
0
1 Year of Service
#3
Posted: 24-08-2015, 04:44 PM
Thank you
How to do shadow style for menu
Junior Member
Posts:
90
Joined:
Aug 2015
Likes:
6
Credits:
66
Reputation:
21
1 Year of Service
#4
Posted: 24-08-2015, 04:59 PM
Junior Member
Posts:
50
Joined:
Sep 2015
Likes:
4
Credits:
81
Reputation:
3
1 Year of Service
#5
Posted: 17-09-2015, 12:05 PM (This post was last modified: 17-09-2015, 12:13 PM by ihton.)
Prety useful, thanks!

I hope this works with a custom template Tongue

Edit:
Didn't work with the rip of "Uniform" theme by default, here you have the code to get it working ^^
Code:
<script>
           $('#navBar').addClass('original').clone().insertAfter('#navBar').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','2000').removeClass('original').hide();
           $('.cloned #searchWrap').remove();
       
           $(document).ready(function() {
               var stickyNavTop = $('#navBar').offset().top;
       
               window.addEventListener("resize", clone);
               function clone() {
                   var test = document.getElementById('navBar').offsetWidth;
                   $('.cloned').css('width',test);
               }
       
               var stickyNav = function(){
                   var scrollTop = $(window).scrollTop();
       
                   if (scrollTop > stickyNavTop) {
                       $('.cloned').css('display', 'inline');
                       $('.original').css('visibility', 'hidden');
                       $('.original #searchWrap').appendTo('.cloned');
                   } else {
                       $('.cloned').css('display', 'none');
                       $('.original').css('visibility', 'visible');
                       $('.cloned #searchWrap').appendTo('.original');
                   }
               };

               stickyNav(); clone();
       
               $(window).scroll(function() {
                   stickyNav();
               });
           });
       </script>
The last reply on this thread is older than a month. Please do not unnecessarily bump it.
Register an account or login to reply
Create an account
Create a free account today and start posting right away. It only takes a few seconds.
Login
Log into an existing account.
1 Guest(s)