欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

Jquery制作左側浮動層滾動時跟隨頁面滾動

JavaScript
老白8年前2022瀏覽0評論

Jquery制作左側浮動層跟隨頁面滾動。

1、jQuery 導航菜單、廣告 —— 固定、置頂、跟隨

2、jQuery 智能判斷跟隨頁面滾動的導航、菜單、廣告，下拉后跟隨置頂特效代碼

3、jQuery - 多個菜單導航滾動跟隨，全部積累固定在頂端

4、jquery 實現導航欄置頂跟隨窗口滾動

5、即插即用javascript 導航/廣告 窗口滾動跟隨的效果

以上5種導航/廣告滾動跟隨都可以正常使用，且親測可用，今天再來分享另一種方法！

滾動跟隨.gif

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>