gpt4 book ai didi

jquery - 滚动时突出显示标题

转载 作者:行者123 更新时间:2023-12-01 06:38:01 24 4
gpt4 key购买 nike

我已将 session 设置为行。

<div class="container" id="session1">
<div class="row session">
<div class="fourcol">
<h2>Session 3:</h2>
</div>

<div class="fourcol last">
<p> Information about session </p>
</div>

</div>
</div>

我有很多这样的 session ,需要一种方法来突出显示您正在阅读 session 1。我想添加 .selected类(class) <h2 class="selected">Session 3:</h2>当你滚动过去时。

我希望这也会添加 .selected类是否有任何传入的 anchor 链接。到/sessions#session1 因为它必须“滚动”到该位置

任何帮助都会很棒。谢谢。

最佳答案

我建议您查看jQuery Waypoints ,它正是您正在寻找的东西,而且易于使用。

Here's an example我制作了,当使用 jQuery Waypoints 将元素滚动到视口(viewport)时,我添加了 .selected 类。

<小时/>

您当然也可以自己做,但您会做 Waypoint 已经在做的事情。
首先使用.scroll event在文档或所需元素上捕获您想要的特定事件。

$(document).scroll(function(e){
});

然后使用 .scrollTop检查您所在的位置,并根据视口(viewport)(即窗口)添加元素必须位于其中的“边界”。

$(document).scroll(function(e){
var bound_top = $(this).scrollTop(),
bound_bottom = bound_top + $(window).height();
});

然后检查每个标题/部分元素以查看它们是否在这些边界内

$(document).scroll(function(e){
var bound_top = $(this).scrollTop(),
bound_bottom = bound_top + $(window).height();

$("h2").each(function(){
if(
$(this).position().top >= bound_top &&
$(this).position().top + $(this).outerHeight() <= bound_bottom
){
$(this).addClass("selected");
}else{
$(this).removeClass("selected");
}
}
});

它看起来有点像 in this example我做的。

这种方法可以让您完全按照自己想要的方式做事。
jQuery Waypoints 是一个很好且快速的替代方案。

关于jquery - 滚动时突出显示标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9474582/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com