Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
- <style type="text/css">
- .sticky_bar p {
- display: inline;
- font-size: 13px;
- padding-right: 6px;
- }
- .sticky_bar a {
- text-decoration: none;
- float: left;
- }
- .sticky_bar {
- visibility: hidden;
- position: fixed;
- width: 100%;
- height: 65px;
- left: 0;
- top: 0;
- z-index: 100;
- border-top: 0;
- margin: 0;
- border: 0;
- padding: 0;
- background-color: #000000;
- }
- .sticky_bar_active {
- visibility: visible;
- position: fixed;
- width: 100%;
- height: 65px;
- left: 0;
- top: 0;
- z-index: 100;
- border-top: 0;
- }
- .sticky_text {
- color: #FFFFFF;
- }
- .wrapper {
- width: 1170px;
- margin-top: 0px;
- margin-right: auto;
- margin-bottom: 0px;
- margin-left: auto;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function()
- {
- $(window).scroll(function()
- {
- if($(window).scrollTop() >= 60)
- {
- $(".sticky_bar").slideDown("slow")
- $(".sticky_bar").addClass("sticky_bar_active");
- }
- else
- {
- $(".sticky_bar").slideUp("slow");
- $(".sticky_nav").removeClass("sticky_bar_active");
- }
- });
- });
- </script>
- </head>
- <body>
- <nav class='sticky_bar'>
- <ul class='wrapper'>
- <li>
- <a href='#'><div class='sticky_text'><p>Overview</p></div></a>
- </li>
- <li>
- <a href='#'><div class='sticky_text'><p>Details</p></div></a>
- </li>
- <li>
- <a href='#'><div class='sticky_text'><p>Settings</p></div></a>
- </li>
- </ul>
- </nav>
- <ul>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- <li>Hello</li>
- </ul>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement