【问题标题】: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();
       }
    });
    

    【讨论】:

      猜你喜欢
      • 2014-12-08
      • 1970-01-01
      • 1970-01-01
      • 2023-03-07
      • 1970-01-01
      • 2017-11-10
      • 1970-01-01
      • 2020-08-07
      • 1970-01-01
      相关资源
      最近更新 更多