The div is fixed on the top of webpage

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Many sites have a block is fixed on the top of the function, today Internet search and then write it again, put out for everyone to have a look, day use own also can have a look

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2   <html xmlns="http://www.w3.org/1999/xhtml">
 3   <head runat="server">
 4       <title></title>
 5       <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
 6       <script type="text/javascript">
 7           $(function() {
 8               //Gets the distance at the top of the browser to locate elements distance
 9               var navH = $(".hb").offset().top;
10               //Scroll bar event
11               $(window).scroll(function() {
12                   //Gets the sliding distance of the scroll bar
13                   var scroH = $(this).scrollTop();
14                   //Rolling and sliding distance of the positioning element is greater than or equal to the distance from the top of the browser's distance, fixed, and not fixed
15                   if (scroH >= navH) {
16                       $(".hb").css({ "position": "fixed", "top": 0 });
17                   }
18                   else if (scroH < navH) {
19                       $(".hb").css({ "position": "static" });
20                   }
21               })
22           })
23   </script>
24   </head>
25   <body>
26       <div style=" height: 300px;">
27           An empty div</div>
28       <div class="hb" style="height: 100px; width: 100%; background: #999">
29           Move to the top of the fixed</div>
30       <div style="background: #ccc; height: 1500px;">
31           An empty div</div>
32   </body>
33   </html>
34 
35 View Code

Journey to the West tells us: those who have the background of the monster have been picked up, and those who have no background and killed by a stick.




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Leif at November 13, 2013 - 6:52 PM