将垂直滚动位置绑定到计数器
Bind vertical scroll position to counter
我猜这真的很容易,但我是jQuery的新手,所以我有点迷茫。
对相对于用户垂直滚动位置上升的数字进行动画处理的最佳方法是什么?我正在制作一个一百万像素长的div,并想要一个从 0 到一百万的固定数字。我说我必须使用 .scrollTop() 函数是对的吗?
提前为任何帮助干杯!
乙
以下代码应该可以帮助您入门。如果将 html 标记的高度增加到 100 万像素,则会有一个具有所需范围的计数器。
源代码来自此页面。我刚刚从中创建了jsFiddle。
$(function() {
// move the counter with page scroll
// source from this page http://www.pixelbind.com/make-a-div-stick-when-you-scroll/
var s = $("#counter");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
html {
/*force to show vert. scrollbar*/
overflow-y: scroll;
height: 1000200px;
background: url("http://placehold.it/1000x500");
}
div#counter {
padding:20px;
margin:20px 0;
background:#AAA;
width:190px;
}
.stick {
position:fixed;
top:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Dummy text. just to show distance from top calculation.<br/><br/><br/><br/></p>
<div id="counter"></div>
相关文章:
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- 如何将ngrepeat下的ngmodel绑定到$scope
- WinJS内联绑定语法
- 将垂直滚动位置绑定到计数器
- 隐藏/显示绑定到计数器的按钮