jQuery当滚动条滚动时 一个元素到浏览器顶部的距离 随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery当滚动条滚动时 一个元素到浏览器顶部的距离 随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动相关的知识，希望对你有一定的参考价值。
的距离，就是固定div 的位置 不随滚动条滚动改变，不用fixed，就是一滚动top就等于滚动距离加上top。如此保证div到浏览器顶部的距离不变。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery浮动层</title>
<script src="jquery-1.8.3.js"></script><!-- 注意修改引用路径 -->
<style type="text/css">
#Float background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;
</style>
</head>
<script language="javascript">
$(document).ready(function()
$(window).scroll(function ()
// 让浮动层距离窗口顶部，始终保持80px
var offsetTop = $(window).scrollTop() + 80 +"px";
$("#Float").animate(top : offsetTop , duration:500 , queue:false );
);
);
</script>
<body>
<div style="height:2000px;"></div>
<div id="Float"></div>
</body>
</html>
这段代码copy到一个空的html中，注意修改jQuery.1.8.3.js的引用路径，然后在浏览器中打开这个页面，可以看到效果，应该就是你想要的追问
太感谢了 不过出现了这个现象
进到下面的div里面了。能不能做成这个div到网页顶部的距离始终等于它到网页顶部的距离加上滚动条滚动的距离，比如滚动条没动 top是100，滚动条滚动10，top=top+10；一直这样的一个效果
// 让浮动层距离窗口顶部，始终保持80px
var offsetTop = $(window).scrollTop() + 80 +"px";
这句话应该就是你说的效果
$(window).scrollTop()就是滚动条滚动后的距离，然后offsetTop就是你写的：top = top + 10
background-color: #F0F0F0;
height: 48px;
width: 1366px;
position:fixed;
top: 0px;
display: none;
$(window).scroll(function ()
if ($(window).scrollTop() >=158)
$("#floatTop").show(800);
else
$("#floatTop").hide(800);
）;
给你一段我的代码自己参考这改
jq滚动到一定位置的出现动画效果
实现原理:
ele.offset().top 元素到浏览器顶部(的)高(距离)
ele.offset().height 元素自己(的)高
$(window).scrollTop() 浏览器 滚动条 滚动(的)距离
$(window).height()浏览器 窗口(的)高
当滚动的高
$(window).scrollTop() 加上 浏览器窗口的高$(window).height() > = 元素到浏览器顶部(的)高(距离) 执行动画
代码实现:
var a, b, c, d;
$(window).scroll(function () {
moves($("#dh"),"move")
});
// ele 要做动画的类 或者 id
// movename css的动画 类名
function moves(ele,movename) {
a = ele.offset().top;
b = ele.offset().height;
c = $(window).scrollTop();
d = $(window).height();
if (d+c>a) {
$("#dh").addClass(movename);
}else{
$("#dh").removeClass(movename);
}
}
});
列子demo参考 :
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>waypoints</title> 6 <style> 7 #dh{ 8 position: absolute; 9 } 10 .move{ 11 animation: move 1s .5s ease-in-out infinite alternate; 12 -webkit-animation: move 1s .5s ease-in-out infinite alternate; 13 -moz-animation: move 1s .5s ease-in-out infinite alternate; 14 -o-animation: move 1s .5s ease-in-out infinite alternate; 15 } 16 @keyframes move { 17 from{ 18 opacity: 1; 19 transform:translate(100px,20px); 20 -webkit-transform:rotate(0deg) scale(1.1); 21 -moz-transform:rotate(0deg) scale(1.1); 22 -o-transform:rotate(0deg) scale(1.1); 23 transform:rotate(0deg) scale(1.1); 24 } 25 to{ 26 opacity: 0.6; 27 -webkit-transform:rotate(360deg) scale(1); 28 -moz-transform:rotate(360deg) scale(1); 29 -moz-transform:rotate(360deg) scale(1); 30 transform:rotate(360deg) scale(1); 31 32 } 33 34 } 35 36 @-webkit-keyframes move { 37 from{ 38 opacity: 1; 39 transform:translate(100px,20px); 40 -webkit-transform:rotate(0deg) scale(1.1); 41 -moz-transform:rotate(0deg) scale(1.1); 42 -o-transform:rotate(0deg) scale(1.1); 43 transform:rotate(0deg) scale(1.1); 44 } 45 to{ 46 opacity: 0.6; 47 -webkit-transform:rotate(360deg) scale(1); 48 -moz-transform:rotate(360deg) scale(1); 49 -moz-transform:rotate(360deg) scale(1); 50 transform:rotate(360deg) scale(1); 51 52 } 53 54 } 55 56 @-moz-keyframes move { 57 from{ 58 opacity: 1; 59 transform:translate(100px,20px); 60 -webkit-transform:rotate(0deg) scale(1.1); 61 -moz-transform:rotate(0deg) scale(1.1); 62 -o-transform:rotate(0deg) scale(1.1); 63 transform:rotate(0deg) scale(1.1); 64 } 65 to{ 66 opacity: 0.6; 67 -webkit-transform:rotate(360deg) scale(1); 68 -moz-transform:rotate(360deg) scale(1); 69 -moz-transform:rotate(360deg) scale(1); 70 transform:rotate(360deg) scale(1); 71 72 } 73 74 } 75 76 @-o-keyframes move { 77 from{ 78 opacity: 1; 79 transform:translate(100px,20px); 80 -webkit-transform:rotate(0deg) scale(1.1); 81 -moz-transform:rotate(0deg) scale(1.1); 82 -o-transform:rotate(0deg) scale(1.1); 83 transform:rotate(0deg) scale(1.1); 84 } 85 to{ 86 opacity: 0.6; 87 -webkit-transform:rotate(360deg) scale(1); 88 -moz-transform:rotate(360deg) scale(1); 89 -moz-transform:rotate(360deg) scale(1); 90 transform:rotate(360deg) scale(1); 91 92 } 93 94 } 95 96 </style> 97 </head> 98 <body> 99 <br> 100 <br> 101 <br> 102 <br> 103 <br> 104 <br> 105 <br> 106 <br> 107 <br> 108 <br> 109 <br> 110 <br> 111 <br> 112 <br> 113 <br> 114 <br> 115 <br><br> 116 <br> 117 <br> 118 <br> 119 <br> 120 <br> 121 <br><br> 122 <br> 123 124 <br> 125 <br> 126 <br> 127 <br> 128 <dv id="dh" class="" style="padding: 10px; background: #ff3e2b">开始做动画了</dv> 129 130 <br> 131 <br> 132 133 <br> 134 <br> 135 <br> 136 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 137 <script type="text/javascript"> 138 139 function gdjz(div, cssname, offset) { 140 141 } 142 $(document).ready(function (e) { 143 var a, b, c, d; 144 $(window).scroll(function () { 145 moves($("#dh"),"move") 146 }); 147 148 function moves(ele,movename) { 149 a = ele.offset().top; 150 b = ele.offset().height; 151 c = $(window).scrollTop(); 152 d = $(window).height(); 153 if (d+c>a) { 154 $("#dh").addClass(movename); 155 }else{ 156 $("#dh").removeClass(movename); 157 } 158 } 159 }); 160 </script> 161 </body> 162 </html>
以上是关于jQuery当滚动条滚动时 一个元素到浏览器顶部的距离 随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动的主要内容，如果未能解决你的问题，请参考以下文章
使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗？