Question

我最近问过这件事，但似乎以前的答案并不是我想要的。如果我有这样的代码：

<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetargetone"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetargettwo"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetargetthree"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
//and so on...

我想要的是，当用户滚动（或按＆＃34;空格＆＃34;或以其他方式）来到这个特定ID（id=thetargetone或thetargettwo等）时，我会定位它们使用JavaScript代码来操作属性。例如，如果用户滚动到id="thetargetone" JavaScript将触发id="thetargetone"的不透明度。这可能只与JavaScript有关吗？如果是这样，我该怎么办呢？

Answer 1

一个简单的解决方案是使用Bootstrap的插件Scrollspy。您可以在Bootstrap的页面there上找到文档。它使用起来非常简单：

$('#myScrollspy').on('activate.bs.scrollspy', function () {
    // do something…
})

Answer 2

这是一个纯粹的Javascript函数：

var targets = document.getElementsByClassName("target");
var theTarget = targets[0];

window.findTarget = function() {
    var closest = 10000000;
    for(var i=0; i<targets.length; i++) {
        var scrolled = document.body.scrollTop;
        var fromTop = targets[i].offsetTop;

        //console.log(Math.abs(fromTop - scrolled) + " | " + i + " | " + scrolled + " | " + closest);
        if(Math.abs(fromTop - scrolled) < closest) {
            closest = Math.abs(fromTop - scrolled);
            theTarget = targets[i];
            //console.log(closest + " | " + i);
        }
    }
    console.log(theTarget.id);
}

window.addEventListener("scroll", findTarget);

设置任意大数
计算窗口滚动位置
从顶部
获取最小的数字并存储相应的引用（theTarget）

获得参考后，您会说：

theTarget.style.display = "none";

JS小提琴：https://jsfiddle.net/vr69ngcr/1/

有一些控制台日志显示滚动时最近目标的id会发生变化

当用户使用JavaScript滚动到节点时，定位节点的HTML ID

2 个答案: