Scroll with the screen in the sidebar of the jquery page

As you can see in many personal blogs, Baidu ads now have this effect, but Baidu ads only apply to your own ads, if I want to scroll the left side of a website article with the screen, I need to use js or jquery to implement it. The following two examples are organized for everyone to learn.

Function Description

First, I think this function should not appear in IE6, because IE6 does not support native position: fixed to fix the element position, if we use a button similar to the back-to-top button to fade in and out or slide the following, because the following block is large, this will make the user feel uncomfortable.

When the page scroll bar is at the bottom of the following area, the following area changes to float and follows the page scroll. If the scroll bar is back to the top of the element, the following area returns to its original position. now you can scroll to see the effect on the sidebar of this blog.

Parameter description

• Element: the Node object of the following region.
• PrevElement: The Node object above (this parameter is no longer required)
• DistanceToTop: the distance from the top of the node to the top of the page.

1. Download an object

Download native JavaScript and jQuery: ps: // github.com/wuzhao/sidebar-follow "> from GitHub

2. Insert JavaScript and add execution scripts

Add code before </body> at the bottom of the page

Native JavaScript:

The Code is as follows:	Copy code
<Script src = "sidebar-follow.js"> </script> <Script> /* <! [CDATA [*/ (New SidebarFollow (). init ({ Element: 'sidebar-follow ', PrevElement: 'percentage-comments ', DistanceToTop: 15 }); /*]> */ </Script>

JQuery:

The Code is as follows:	Copy code
<Script src = "jquery. js"> </script> <! -- If jQuery has been introduced elsewhere on the website, do not introduce it again. --> <Script src = "sidebar-follow-jquery.js"> </script> <Script> /* <! [CDATA [*/ (New SidebarFollow (). init ({ Element: jQuery ('# sidebar-follow '), PrevElement: jQuery ('# recent-comments '), DistanceToTop: 15 }); /*]> */ </Script>

Parameters:

Element: the Node object of the following region.
PrevElement: The Node object above
DistanceToTop: distance from the top node to the top of the page

Method 2:
JS:

The Code is as follows:	Copy code
<Script type = "text/javascript"> JQuery (document). ready (function (){ Var a = $ ("# abc"). offset (); $ (Window). scroll (function (){ Var B = $ (window). scrollTop (); If (B> a. top + 40 ){ $ ("# Abcad"). addClass ("fixed ") } Else { $ ("# Abcad"). removeClass ("fixed ") } }); }); </Script>

CSS:

The Code is as follows:	Copy code
. Fixed { Position: fixed; Top: 40px; Width: 300px; }

PHP:

The Code is as follows:	Copy code
<Div id = "abc"> <Div id = "abcad"> <Center style = "background: url (/2893f5/18a75936/hello.gif) no-repeat center; height: 250px;"> <! -- Advertising space: 300*250 --> <Script type = "text/javascript"> BAIDU_CLB_SLOT_ID = "491497"; </script> <Script type = "text/javascript" src = www. bKjia. c0m> </script> </Center> </Div> </Div>