Jquery制作左侧浮动层滚动时跟随页面滚动

《Jquery制作左侧浮动层滚动时跟随页面滚动》正文开始，本次阅读大概7分钟。

Jquery制作左侧浮动层跟随页面滚动。

1、jQuery 导航菜单、广告 —— 固定、置顶、跟随

2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码

3、jQuery - 多个菜单导航滚动跟随，全部积累固定在顶端

4、jquery 实现导航栏置顶跟随窗口滚动

5、即插即用javascript 导航/广告 窗口滚动跟随的效果

以上5种导航/广告滚动跟随都可以正常使用，且亲测可用，今天再来分享另一种方法！

jquery 滚动跟随特效代码：

scriptsrc=js/jquery.min.jstype=text/javascript/script
scripttype=text/javascript
$(document).ready(function(){
varobj=$(#sticky);
varoffset=obj.offset();
vartopOffset=offset.top;
varleftOffset=offset.left;
varmarginTop=obj.css(marginTop);
varmarginLeft=obj.css(marginLeft);
$(window).scroll(function(){
varscrollTop=$(window).scrollTop();
if(scrollTop=topOffset){
obj.css({
marginTop:0,
marginLeft:leftOffset,
position:fixed,
});
}
if(scrollToptopOffset){
obj.css({
marginTop:marginTop,
marginLeft:marginLeft,
position:relative,
});
}
});
});
/script

完整的滚动跟随测试代码：

!DOCTYPEhtml
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titleJquery制作左侧浮动层跟随页面滚动/title
style
*{
color:#000;
}
/*http://www.sharejs.com*/
a{
color:#000;
text-decoration:none;
}
#sticky{
margin-top:50px;
margin-left:50px;
padding:5px;
background:rgba(255,255,255,1);
height:120px;
width:305px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
}
#sticky:hover{
background:#6c6c6c;
background:rgba(54,54,54,0.80);
}
.carbonads-container{
}
.sticky_text{
color:#000;
text-align:center;
font-size:16px;
line-height:20px;
padding-top:10px;
}
#text,h1{
color:#000;
margin:0auto;
font-size:1.2em;
line-height:23px;
width:500px;
}
h1,h2{
font-weight:bold;
line-height:50px;
}
a{
color:#e3e3e3;
}
a:hover{
color:#ccc;
}
#container{
width:744px;
}
.menu{
float:left;
}
.button{
-moz-box-shadow:inset0px1px0px0px#ffffff;
-webkit-box-shadow:inset0px1px0px0px#ffffff;
box-shadow:inset0px1px0px0px#ffffff;
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf));
background:-moz-linear-gradient(centertop,#ededed5%,#dfdfdf100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed,endColorstr=#dfdfdf);
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1pxsolid#dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px24px;
text-decoration:none;
text-shadow:1px1px0px#ffffff;
cursor:pointer;
margin-top:10px;
}
.button:hover{
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ededed),color-stop(1,#cfcfc));
background:-moz-linear-gradient(centertop,#ededed5%,#cfcfcf100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed,endColorstr=#cfcfcf);
background-color:#ededed;
border:1pxsolid#bbbbbb;
}
.button:active{
background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed));
background:-moz-linear-gradient(centertop,#dfdfdf5%,#ededed100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dfdfdf,endColorstr=#ededed);
background-color:#dfdfdf;
}
#download{
margin-top:50px;
width:400px;
height:100px;
font-size:72px;
line-height:100px;
margin-right:100px;
margin-bottom:50px;
text-align:center;
}
/style
scriptsrc=http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.jstype=text/javascript/script
scripttype=text/javascript
$(document).ready(function(){
varobj=$(#sticky);
varoffset=obj.offset();
vartopOffset=offset.top;
varleftOffset=offset.left;
varmarginTop=obj.css(marginTop);
varmarginLeft=obj.css(marginLeft);
$(window).scroll(function(){
varscrollTop=$(window).scrollTop();
if(scrollTop=topOffset){
obj.css({
marginTop:0,
marginLeft:leftOffset,
position:fixed,
});
}
if(scrollToptopOffset){
obj.css({
marginTop:marginTop,
marginLeft:marginLeft,
position:relative,
});
}
});
});
/script
/head
body
divid=sticky
divid=carbonads-container
divclass=carbonad
divid=azcarbon/div
imgsrc=img/logo.png//div
/div
/div
divid=text
divclass=headerdspanclass=italicw/span/div
br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1br
1
/body
/html