用户滚动到锚点时的 Javascript CSS答案

【问题标题】：Javascript CSS when the user scrolls to an anchor用户滚动到锚点时的 Javascript CSS
【发布时间】：2012-07-09 15:07:23
【问题描述】：

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

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

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

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

这可以实现吗？

【问题讨论】：

标签： jquery css class hashchange onscroll

【解决方案1】：

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

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

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

【讨论】：

你可以简单地调用$("#headerlinks a").removeClass("current")
谢谢。当用户滚动到该锚点时，有没有办法切换当前链接？

【解决方案2】：

关于 cmets 的第二个问题：

你可以用这个变量去除锚点并检查留下了什么。

例子：

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

【讨论】：