PrivateAlps.net - Offshore Cloud Services | VPS/RDP/VPN - Dedicated Servers - Webhosting - TOR Services - Auto Deploy
ADULTSLAYER.STORE 💎 #1 PORN SHOP | 700+ Hot Products: Brazzers, Teamskeet, Pornhub, NaughtyAmerica, Many More! | 💸 Secure PayPal & Card Payments | Satisfaction Guaranteed! 🔥
IP.Board Tutorials

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

Submitted by Admin, , Thread ID: 6910

Thread Closed
11-07-2015, 07:45 AM
Working Not Working Link Down
#1
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
1
GeroX

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

#2
Impressive! Thank you so much Smile

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

#3
Thank you
How to do shadow style for menu

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

#4
Thanks for the share man
wishlah.deviantart.com| https://nulledbb.com/Thread-Some-of-my-stuff
[Image: kSoqV6.png]

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

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)