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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/3/4 1:03:56 共计：3581 浏览

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">d<span class="italic">w</span></div>
<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1
</body>
</html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jquery 实现导航栏置顶跟随窗口滚动_js/jQuery | ·下一条：即插即用javascript 导航/广告窗口滚动跟随的效果_js/jQuery