jquery - 用户滚动到锚点时的 Javascript CSS

Question

我有一个网站http://www.mitchellfinlay.co.uk/newlake/magazines.html

它利用了窗帘效果，每个li元素在滚动时或在顶部单击链接时自动显示... tempus...talkbusiness 等。

我想要做的是当用户滚动到链接锚定到的那个窗帘时，将链接的类设置为“当前”。

这需要在用户滚动或自动滚动在该页面上停止时发生。

这是可以实现的吗？

Answer 1

这应该遍历标题中的链接，current从每个链接中删除类，并将其添加到单击的链接中：

$(document).on('click', '#headerLinks a', function() {
    $("#headerlinks a").removeClass("current");
    $(this).addClass("current");
});

至于滚动，您可以使用element.posistion()andwindow.scrollTop()来确定屏幕顶部的元素。我在这个小提琴中做了一个演示。您必须根据需要对其进行调整，但它显示了基本概念。

Answer 2

关于评论的第二个问题：

您可以使用此变量剥离锚点并检查留下的内容。

例子：

$('#headerlinks a').click(function(){
   var anchor = document.location.hash;
   if ( anchor === '#myContent1' ) { //this can be href from ur a.
     $('.allContents').hide();
     $('#myContent1').show();
   }
});