Question

我有一个面包屑的文字和链接，当到达这个很长的页面上的锚点时需要更新。

示例：

<div class="crumbs hidden-xs">
<a href="#">Parent link</a>   /   <a href="#summary" class="link-location">Summary</a>
</div>

页面上远处的锚点示例：

<h1 id="chapter-2" class="page-location">Chapter 2 title here</h1>

当上面的锚点位于屏幕顶部时，我需要：

<a href="#summary" class="link-location">Summary</a>

改为：

<a href="#chapter-2" class="link-location">Chapter 2 title here</a>

当我一直回到页面顶部时，应该没有面包屑：

<div class="crumbs hidden-xs">
<a href="#">Parent link</a>
</div>

我尝试了很多事情，我有点困惑。这导致我让菜单工作：

$("#main-nav .panel a").on("click", function() {
$('.link-location').html( $(this).html() );
});`

我也尝试了以下内容：

var t = $(".page-location").offset().top;
$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('.link-location').html( $(this).html() );
    }
});

这似乎对我没有任何作用。

您可以在此处找到我的布局示例：http://jsfiddle.net/15298c0p/

非常感谢任何帮助。

Answer 1

请参阅https://stackoverflow.com/a/488073/1697755

有一个方便的功能来检查元素可见性：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

使用该功能可能看起来像这样：http://jsfiddle.net/5xgw82ft/1/

您应该根据需要调整偏移量。

jQuery - 根据锚可见性更改文本和链接

1 个答案: