IP.Board Tutorials

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

Submitted by Admin, , Thread ID: 6910

Thread Closed

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

ihton
Novice
Level:
0
Reputation:
3
Posts:
49
Likes:
4
Credits:
137
17-09-2015, 12:05 PM
This post was last modified: 17-09-2015, 12:13 PM by ihton
#5
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>

Users browsing this thread: 1 Guest(s)