JQuery Popup Fixed Navigation
Popup fixed navigation
I would like to show you the navigation bar that appears when scrolling down to the bottom of the page content, and remains in place.
I will use jQuery to implement compatibility so that IE is included.
Such navigation is quite popular element of web design. They often can be found on many web sites.
')
I will use the HTML5 nav element as a container for a horizontally linked list.
Step 1.
Navigation container
I already know everything familiar with HTML5. In this example, I use two of them :: and. I'll start with the following markup:
Step 2.
We bring in a worthy look .
In style.css with id = "hide" sets position: fixed; And everything else is solely for your taste and color.
Step 3.
JQuery code
Below is the JavaScript code. It hides the #hide element. Then it checks the position value of the upper scrollbar “scrollTop”, and if it is more than 100, displays the #hide element, otherwise hides it. The next part of the code is the function of handling the event of clicking on the “Up” button - # go-top. If you click on the button, the scrollTop value of the body tag will be set to 0.
Here is my source
Demo
I would like to show you the navigation bar that appears when scrolling down to the bottom of the page content, and remains in place.
I will use jQuery to implement compatibility so that IE is included.
Such navigation is quite popular element of web design. They often can be found on many web sites.
')
I will use the HTML5 nav element as a container for a horizontally linked list.
Step 1.
Navigation container
I already know everything familiar with HTML5. In this example, I use two of them :: and. I'll start with the following markup:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="styles.css" /> <!-- . --> </head> <body> <nav id="hide">”<!— . --> <ul> <li><a href="#link-1" class="selected"></a></li> <li><a href="#link-2"> I</a></li> <li><a href="#link-3"> II</a></li> <li><a href="#link-4"> III</a></li> <li><a href="#top" id="go-top">⇑ ⇑</a> </li> </ul> </nav> <div class=wrapper> <h1> .</h1> <section id=" link-1"> ...</section> </div> </body> </html> Step 2.
We bring in a worthy look .
In style.css with id = "hide" sets position: fixed; And everything else is solely for your taste and color.
#hide { width:100%; height:40px; padding: 20px 0; position: fixed; top: 0px; margin:0px; background-color:#287455; text-align:center; opacity:0.9; filter:alpha(opacity=90); -moz-opacity:0.9; } #hide li a { text-decoration: none; font-size: 20px; color: #000; font-weight: bold; display: inline-block; width: 120px; text-align: center; padding: .80px 16px; } nav li a:hover, nav li a.selected { color: #000; z-index:5; background: #40bfe8; } Step 3.
JQuery code
Below is the JavaScript code. It hides the #hide element. Then it checks the position value of the upper scrollbar “scrollTop”, and if it is more than 100, displays the #hide element, otherwise hides it. The next part of the code is the function of handling the event of clicking on the “Up” button - # go-top. If you click on the button, the scrollTop value of the body tag will be set to 0.
<script src="jquery-1.6.4.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#hide").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#hide').fadeIn(); } else { $('#hide').fadeOut(); } }); $('#go-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> Here is my source
Demo
Source: https://habr.com/ru/post/178305/
All Articles