Question

所以我想知道如何获得我目前正在使用的html的哪个部分或部分内容。一个例子那么我怎么知道用户是否已经使用JavaScript向下滚动第2部分或者如果他们目前处于第1部分

<html>
<head>
</head>
<body>
<section class=“part 1”>
</section>
<section class= “part2>
</section>
</body>

</html>

Answer 1

以下代码将为您提供有关如何处理此情况的一些信息。基本上你会想要获得你可以使用的滚动条位置：

document.documentElement.scrollTop

您还希望获得您要查找的元素所在的范围，在我们的示例中，它是.part1和.part2。我们可以使用offsetTop作为限制的开头来获取该范围，并offsetTop + clientHeight来确定结束。

您将不得不跟踪窗口滚动事件。

以下示例是通用的：

$(window).scroll(function(e) {
    if (document.documentElement.scrollTop > 0 
        && document.documentElement.scrollTop < $('.part2').offset().top ) {
        $('div').html("At part1")
    } else {
         $('div').html("At part2")
    }
});

JSFiddle

同样，如果你想要一点模块化：

$(window).scroll(function(e) {
    let watchList = ['part1', 'part2', 'part3'];

    let scrollTop = document.documentElement.scrollTop;
    for (var classname of watchList) {
        let el = document.getElementsByClassName(classname)[0];
        if (scrollTop > el.offsetTop &&
            scrollTop < el.offsetTop + el.clientHeight) {
            $('div').html("At <strong>"+classname+"</strong>");
        }
    }
});

JSFiddle

继续这种可能性是无限的，并使其更有用，但我会把它留给你。

Answer 2

你可以使用is [“：focus”]函数找到当前哪个div有焦点。

if($(".part1").is(":focus"))
{
//you code
}
else if($(".part2").is(":focus"))
{
//you code
}

Answer 3

你可以使用当鼠标第一次进入div时它会触发的mouseenter函数。

$(".part1").on('mouseenter', function(){
  //your command
});

你可以使用鼠标悬停功能来找到鼠标的位置。当鼠标在div内移动时会触发。

$(".part1").on('mouseover', function(){
  //your command
});

Answer 4

您可以使用javascripts offsetTop功能。这是一个参数，它返回div与像素数的顶部向下的距离。

它还可以返回用户在窗口对象本身上调用时滚动的距离。那么这只是一个数学问题。看看用户是否已经潦倒得足以超过参考中的div。

例如：

var part1DivOffset = document.getElementsByClassName("part 1")[0].offsetTop;
var part2DivOffset = document.getElementsByClassName("part2")[0].offsetTop;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

此代码将为您提供3个变量。前两行保存了div的offsetTop。第三行检测用户滚动的距离。然后你可以用变量做数学运算：

if(scrollTop >= part1DivOffset){
  //we are past part1
}
if(scrollTop >= part2DivOffset){
  //We are past part 2
}
if(scrollTop >= part1DivOffset && scrollTop < part2DivOffset){
  //We are past part 1 but not past part 2
}

如何知道用户的HTML部分

4 个答案: