After scrolling to the specified position, we will fix the effect on the left, right, or top or bottom. Next I will introduce three fixed display effects codes after scrolling to a certain position, for more information, see.
Fixed display after js scrolls to a certain position
| The Code is as follows: |
Copy code |
|
<Script type = "text/javascript">
Function htmlScroll ()
{
Var top = document. body. scrollTop | document.doc umentElement. scrollTop;
If (elFix. data_top <top)
{
ElFix. style. position = 'fixed ';
ElFix. style. top = 0;
ElFix. style. left = elFix. data_left;
}
Else
{
ElFix. style. position = 'static ';
}
}
Function htmlPosition (obj)
{
Var o = obj;
Var t = o. offsetTop;
Var l = o. offsetLeft;
While (o = o. offsetParent)
{
T + = o. offsetTop;
L + = o. offsetLeft;
}
Obj. data_top = t;
Obj. data_left = l;
}
Var oldHtmlWidth = document.doc umentElement. offsetWidth;
Window. onresize = function (){
Var newHtmlWidth = document.doc umentElement. offsetWidth;
If (oldHtmlWidth = newHtmlWidth)
{
Return;
}
OldHtmlWidth = newHtmlWidth;
ElFix. style. position = 'static ';
HtmlPosition (elFix );
HtmlScroll ();
}
Window. onscroll = htmlScroll;
Var elFix = document. getElementById ('fixedright ');
HtmlPosition (elFix );
</Script> |
JQuery is fixed when elements scroll to the back of the top
| The Code is as follows: |
Copy code |
|
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js"> </script>
<Script>
$ (Function (){
Var elm = $ ('# pordAttr ');
Var startPos = $ (elm). offset (). top;
$. Event. add (window, "scroll", function (){
Var p = $ (window). scrollTop ();
Vertex (elm).css ('position', (p)> startPos )? 'Fixed': 'static ');
Vertex (elm).css ('top', (p)> startPos )? '0px ':'');
});
});
</Script> |
Fixed sidebar effect during Page scrolling
You need to modify the corresponding code as needed. The complete JavaScript code is as follows:
| The Code is as follows: |
Copy code |
|
// Fixed tag cloud
JQuery (function (){
// The specified height. The distance from the sidebar to the top + the sidebar height + the visible page height
Var sideTop = jQuery ("# sidebar"). offset (). top + jQuery ("# sidebar"). height () + jQuery (window). height ();
Var scTop = function (){
If (typeof window. pageYOffset! = 'Undefined '){
Return window. pageYOffset;
} Else if (typeof document. compatMode! = 'Undefined' & document. compatMode! = 'Background '){
Return document.doc umentElement. scrollTop
} Else if (typeof document. body! = 'Undefined '){
Return document. body. scrollTop;
}
}
JQuery (window). scroll (function (){
If (scTop ()> sideTop ){
If (jQuery ("# fixed-siderbar"). length = 0 ){
// Below is the module to be displayed. Copy the cloud TAG content in the sidebar and append it to the bottom of the sidebar.
Var tag = jQuery ("# tag_cloud-2. widget-wrap" (.clone().html ();
Var html = "<div id = 'Fixed-siderbar'> <div id = 'Fixed-wrap'> <div id = 'fixedtag' class = 'widget widget_tag_cloud '>" + tag + "</div>"
JQuery ("# sidebar"). append (html );
} Else {
JQuery ("# fixed-siderbar"). show ();
}
} Else {
JQuery ("# fixed-siderbar"). hide ();
};
});
}); |
Add my CSS and modify it as needed.
| The Code is as follows: |
Copy code |
# Fixed-siderbar {
Z-index: 0;
Position: fixed;
Top: 70px;
}
|
The effect is as follows:
