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

时间:2014-09-11 01:48:25

标签: jquery anchor

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

示例:

<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/

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

请参阅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/

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