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

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

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

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

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

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

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

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

jquery 滚动跟随特效代码：

script src="js/jquery.min.js" type="text/javascript">
    /script>
    script type="text/javascript">
$(document).ready(function(){
    var obj = $('#sticky');
    var offset = obj.offset();
    var topOffset = offset.top;
    var leftOffset = offset.left;
    var marginTop = obj.css("marginTop");
    var marginLeft = obj.css("marginLeft");
$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
        if (scrollTop >
= topOffset){
        obj.css({
            marginTop: 0,            marginLeft: leftOffset,            position: 'fixed',        }
    );
    }
    if (scrollTop  topOffset){
        obj.css({
            marginTop: marginTop,            marginLeft: marginLeft,            position: 'relative',        }
    );
    }
}
    );
}
    );
    /script>
    

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

!DOCTYPE html>
    head>
    meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
    title>
    Jquery制作左侧浮动层跟随页面滚动/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: 0 auto;
     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: inset 0px 1px 0px 0px #ffffff;
     -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
     box-shadow: inset 0px 1px 0px 0px #ffffff;
     background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
     background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
     background-color: #ededed;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
     border-radius: 6px;
     border: 1px solid #dcdcdc;
     display: inline-block;
     color: #777777;
     font-family: arial;
     font-size: 15px;
     font-weight: bold;
     padding: 6px 24px;
     text-decoration: none;
     text-shadow: 1px 1px 0px #ffffff;
     cursor: pointer;
     margin-top: 10px;
}
.button:hover {
     background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #cfcfc) );
     background: -moz-linear-gradient( center top, #ededed 5%, #cfcfcf 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#cfcfcf');
     background-color: #ededed;
     border: 1px solid #bbbbbb;
}
.button:active {
     background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
     background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
     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>
    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">
    /script>
    script type="text/javascript">
$(document).ready(function(){
    var obj = $('#sticky');
    var offset = obj.offset();
    var topOffset = offset.top;
    var leftOffset = offset.left;
    var marginTop = obj.css("marginTop");
    var marginLeft = obj.css("marginLeft");
$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
     if (scrollTop >
= topOffset){
  obj.css({
   marginTop: 0,   marginLeft: leftOffset,   position: 'fixed',  }
    );
 }
 if (scrollTop  topOffset){
  obj.css({
   marginTop: marginTop,   marginLeft: marginLeft,   position: 'relative',  }
    );
 }
}
    );
}
    );
    /script>
    /head>
    body>
    div id="sticky">
      div id="carbonads-container">
        div class="carbonad">
          div id="azcarbon">
    /div>
          img src="img/logo.png"/>
     /div>
      /div>
    /div>
    div id="text">
    div class="header">
    dspan class="italic">
    w/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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！