• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

AAC Help using jQuery

Apollos

Apollos

Dude who does stuff
Joined
Apr 22, 2009
Messages
829
Solutions
123
Reaction score
655
Location
United States
Using the latest Znote. First time attempting any javascript. Trying to create a sticky menu bar through jquery, but not sure where to put the new function and how to call it, plus not even sure if im excuting this right. x.x any help appreciated, thanks.

CSS: 
nav {
  height: 44px;
  width: 100%;
  margin: -44px auto 0 auto;
  background: transparent url(../images/menubar.png) repeat;
  position: relative;
  z-index: 150;
}

.navsticky {
  position: fixed;
  padding-top: 50px;
  width: 100%;
  top: 0;
}

JavaScript: 
    var mn = $("nav");
 
    $(window).scroll(function() {
        if( $(this).scrollTop() > 50 ) {
            mn.addClass("navsticky");
        }
        else {
            mn.removeClass("navsticky");
        }
    };
 
Solution
StreamSide
hello there, you can test with this bro
codepen: JQuery - Easy Sticky Nav Bar

HTML sample:
HTML: 
<body>

<div class="wrapper">
    <div class="header">
HEADER CONTENT
    </div>
    <div class="nav">
        WHATEVER YOU WANT TO BE STICKY
    </div>
    <div class="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem...
Sort by date Sort by votes
hello there, you can test with this bro
codepen: JQuery - Easy Sticky Nav Bar

HTML sample:
HTML: 
<body>

<div class="wrapper">
    <div class="header">
HEADER CONTENT
    </div>
    <div class="nav">
        WHATEVER YOU WANT TO BE STICKY
    </div>
    <div class="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

</body>

CSS sample:
CSS: 
body {
    margin: 0;
    padding: 0;
}
.header {
    padding: 25px 0;
    background-color: #000;
}
.nav {
    padding: 25px 0;
    background-color: red;
    position: -webkit-sticky;
}
.header, .nav {
    text-align: center;
    color: #fff;
}
.content {
    width: 600px;
    margin: 10px auto 100px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

jQuery sample:
JavaScript: 
$(document).ready(function() {
            // grab the initial top offset of the navigation
              var stickyNavTop = $('.nav').offset().top;
            
              // our function that decides weather the navigation bar should have "fixed" css position or not.
              var stickyNav = function(){
               var scrollTop = $(window).scrollTop(); // our current vertical position from the top
                  
               // if we've scrolled more than the navigation, change its position to fixed to stick to top,
               // otherwise change it back to relative
               if (scrollTop > stickyNavTop) {
                   $('.nav').addClass('sticky');
               } else {
                   $('.nav').removeClass('sticky');
               }
            };

            stickyNav();
            // and run it again every time you scroll
            $(window).scroll(function() {
                stickyNav();
            });
        });
 
Last edited by a moderator:
Upvote 0 Downvote
Solution

Similar threads

_Aion_
  • Question
OTClient oufit on module
Replies
0
Views
337
_Aion_
_Aion_
I
  • Question
Otcv8 Healthinfo Help
Replies
1
Views
397
Mateus Robeerto
Mateus Robeerto
3221920
  • Question
AAC [HELP] MyAAC Headline not work
Replies
4
Views
491
3221920
3221920
Back
Top