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

ihton · 17-09-2015, 12:05 PM

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>

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

Submitted by Admin, 11-07-2015, 07:45 AM, Thread ID: 6910

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