jQuery - 基於錨點可見性更改文本和鏈接

-2

我有一個麪包屑的文本和鏈接，當到達這個非常長的頁面上的錨點時需要更新。jQuery - 基於錨點可見性更改文本和鏈接

實施例：

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

任何幫助將不勝感激。

來源

2014-09-11 Daniel

「任何想法」在這裏都不是真正的問題。嘗試一些東西，當它不能按照你想要的方式返回時，請求幫助然後 – charlietfl 2014-09-11 01:51:32

對不起。我認爲「我嘗試了所有我能找到的東西」是一個給定的。如果問題重大，我編輯了我的問題。 – Daniel 2014-09-11 01:58:11

@charlietfl有什麼想法？ ;） – Daniel 2014-09-11 02:11:26

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

您應調整偏移量爲期望。

來源

2014-09-11 23:59:10 Schlaus

TY這導致我找到正確的解決方案。 – Daniel 2014-09-16 00:09:39

jQuery - 基於錨點可見性更改文本和鏈接

回答

相關問題