大なり記号または小なり記号を渡したら、スクロール関数を使用して関数を実行しようとしてい<a>ます。まず、ページに固定されている開始点：
<div style="height: 200px">
<input type="text" id="starting-point" />
<div>
これは、開始点をページの上部から200pxに設定しています。その場合、その背後にあるコンテナは、スクロール時に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>タグがその開始点を通過するときに変数を設定して、必要なものを実行するために関数に渡す方法がわかりません。<a>ページには20個のタグが存在する可能性があります。forループを実行しても、問題は解決しないと思います。
これがあなたがそれをする方法のデモです。
他の方法もあるかもしれません。
ロード時に#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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加