我正在尝试使用滚动功能来运行一个一旦传递大于或小于<a>
标签的函数。首先是页面上固定的起点:
<div style="height: 200px">
<input type="text" id="starting-point" />
<div>
这是将起点设置为距页面顶部200像素的位置。然后,在滚动时(使用窗口作为滚动位置),其后面的容器可以是1000px至3000px。
<div style="height: 200px;">
<input type="text" id="starting-point" />
<div>
<div style="height: 3000px;">
<!-- ... content here -->
<div style="height: 200px;">
<a href="">1</a>
</div>
<div style="height: 300px;">
<a href="">2</a>
</div>
<div style="height: 240px;">
<a href="">3</a>
</div>
etc...
</div>
我要实现的目标是通过起点的每个<a>
标签,以显示一些东西。因此,当滚动从1开始时,一旦2到达起点,页面上的某些内容(例如文本框)会将其从1切换到2,依此类推,然后向下,然后反向向上返回。这是我到目前为止的内容:
$(document).ready(function () {
window.addEventListener('scroll', function (e) {
var setStart = $('#starting-point').offset().top - $(window).scrollTop(); // starting point
var getTag = $('a');
if (setStart >= getTag) {
run function here
}else{
run function here
}
});
});
我不知道如何设置变量,以确保<a>
标记何时通过该起点将其传递到函数中以运行所需的内容。页面上可能有20个<a>
标签。我认为运行for循环无法解决问题。
答案 0 :(得分:2)
这是一个演示如何实现的示例。
还有其他方法。
在加载时,我们获得#starting-point
的位置以及现在具有scroll_target
类的所有锚点。
然后,在滚动时,您必须确定滚动方向...因为向上和向下的逻辑略有不同。
每次经过“目标”位置时,scroll_target
就会减少/增加。
因此,您知道由于位置数组而刚刚传递了哪个锚点。
我创建了一个文本数组,根据刚通过的锚文本更新输入。也可以是锚点的值或data- *属性。
我将所有控制台日志留给您,以查看发生了什么事。
$(document).ready(function(){
var startPoint = $("#starting-point").offset().top;
console.log(startPoint);
var scrollTargets_pos = [];
var scrollTargets_text = [];
var scrollingDown = true;
var lastScroll = 0;
$(".scroll_target").each(function(){
scrollTargets_pos.push($(this).offset().top);
scrollTargets_text.push($(this).text());
});
console.log(scrollTargets_pos);
console.log(scrollTargets_text);
var passedIndex = -1;
$(window).on("scroll",function(){
var scrolled = $(this).scrollTop();
console.log(scrolled);
// Scroll direction
scrollingDown = (scrolled > lastScroll);
lastScroll = scrolled;
if(scrollingDown){
// Scrolling down...
//console.log("down");
if( scrolled+startPoint > scrollTargets_pos[passedIndex+1] ){
console.log("======================");
$("#starting-point").val(scrollTargets_text[passedIndex+1]);
passedIndex++;
}
}else{
// Scrolling up...
//console.log("up");
if( scrolled+startPoint < scrollTargets_pos[passedIndex] ){
console.log("======================");
$("#starting-point").val(scrollTargets_text[passedIndex])
passedIndex--;
}
}
});
}); // End ready
.startPointDiv{
position: fixed;
top: 100px;
left:0;
width:100%;
border-top: 1px solid red;
text-align: center;
}
.content{
height: 3000px;
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="startPointDiv">
<input type="text" id="starting-point" />
</div>
<div class="content">
<!-- ... content here -->
<div style="height: 200px;">
<a href="" class="scroll_target">1</a>
</div>
<div style="height: 300px;">
<a href="" class="scroll_target">2</a>
</div>
<div style="height: 240px;">
<a href="" class="scroll_target">3</a>
</div>
etc...
</div>