Jquery implements layer div auto-Floating Top instance

The Floating Top effect is not always like this, but when we scroll to the specified position, the specified DIV layer will automatically hover the top. Next I will introduce the implementation process.

Directly use the following code

The Code is as follows:	Copy code
<Script src = "http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> </script>   <Script src = "/blog/js/scroll. js"> </script>   <Div class = "y_bds" style = "clear: both;"> Pay attention to two points: one is style clear: both, and the other produces class = y_bds </Div>

This code is inserted into the template directory loop-single.php
(If your blog already has the jquery. js file, delete the first line of code)

Scroll. js is a separate file for Xiaosheng, the content of which is as follows:

The Code is as follows:	Copy code
$ (Document). ready (function (){ Var headHeight = 200; // there is actually a better method for this height. Users can manually adjust the settings as needed.   Var nav = $ (". y_bds "); $ (Window). scroll (function (){   If ($ (this). scrollTop ()> headHeight ){ Nav. addClass ("navFix "); } Else { Nav. removeClass ("navFix "); } }) })

Style.css under the Template

The Code is as follows:	Copy code
/* Add css 2013-4-2 */ . NavFix {background: # FFF; position: fixed; left: 140px; top: 0px; width: 600px; _ position: absolute; top: expression (offsetParent. scrollTop) + 0); z-index: 2 ;}