基於jQuery錨的麪包屑？

Question

所以，我有一個網站有一個手風琴菜單，使用錨標籤來瀏覽網站。

沒有其他頁面，只有一個頁面，其中的所有內容由錨點分隔。
我正在尋找滾動到特定錨定標記（嵌套）或單擊手風琴菜單中的錨定鏈接（嵌套）時顯示的麪包屑。
我如何在jQuery中創建類似這樣的東西？
我正在考慮在名稱標記中添加類，以在視口腳本中使用isvisible生成jquery中的breadcrumb。
然而，當我想到它的時候，當用戶複製並粘貼一個帶有錨點的url並且從該頁面開始，
時，會發生什麼，然後它不會滾過其他錨點，並且麪包屑將無法正確顯示。
我應該如何着手創建？
這是否意味着我必須以某種方式在javascript/jQuery中創建層次結構？

以下的jsfiddle顯示了它應該如何工作的想法：https://jsfiddle.net/6dnxcoet/3/

<nav id="menu"> 
<ul> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#information">Information</a> 
    <ul> 
     <lI><a href="#contact">Contact</a></lI> 
     <li><a href="#about-us">About Us</a></li> 
     <li><a href="#news">News</a></li> 
    </ul> 
    </li> 
</ul> 
</nav> 
<nav id="breadcrumb"> 
    <ul class="breadcrumb clear-initial-trail"> 
    <li><div><a href="#home">Home</a></div></li> 
    </ul> 
</nav> 
<main> 
    <div class="page"> 
    <h1><a name="home">Home</a></h1> 
    <p>Some content</p> 
    </div> 
    <h2><a name="information">Information</a></h2> 
    <div class="page"> 
    <h3><a name="contact">Contact</a></h3> 
    <p>Some content</p> 
    </div> 
    <div class="page"> 
    <h3><a name="about-us">About Us</a></h3> 
    <p>Some content</p> 
    </div> 
    <div class="page"> 
    <h3><a name="news">News</a></h3> 
    <p>Some content</p> 
    </div> 
</main> 

.page { 
    height: 800px; 
    background-color:red; 
    width:400px; 
    margin-left:auto; 
    margin-right:auto; 
} 

main { 
    text-align:center; 
} 

#menu { 
    position:fixed; 
} 

#breadcrumb { 
    position:fixed; 
    right:200px; 
    top:0px; 
} 

.breadcrumb{ 
    display: block; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.breadcrumb > li { 
    display: inline-block; 
    list-style: none; 
    margin-right: -15px; 
} 

.breadcrumb.clear-initial-trail > li:first-child > div { 
    margin-left: 0; 
    padding-left: 10px; 
    border-top-left-radius: 2px; 
    border-bottom-left-radius: 2px; 
} 

.breadcrumb.clear-initial-trail > li:first-child > div::before { 
    display: none; 
} 

.breadcrumb > li > div{ 
    display: inline-block; 
    background-color: #999; 
    margin: 2px; 
    padding: 0 8px 0 8px; 
    margin-right: 15px; 
    margin-left: 15px; 
    color: #fff; 
    position: relative; 
    height: 30px; 
    line-height: 30px; 
} 

.breadcrumb > li > div::after{ 
    display: block; 
    position: absolute; 
    top:0; 
    left: 100%; 
    content: ''; 
    border: 15px solid transparent; 
    border-left-width: 15px; 
    border-right-width: 0px; 
    z-index: 10; 
    border-left-color: #999; 
} 

.breadcrumb > li > div::before{ 
    display: block; 
    position: absolute; 
    top:0; 
    right: 100%; 
    content: ''; 
    background-color: #999; 
    border: 15px solid transparent; 
    border-left-width: 15px; 
    border-right-width: 0px; 
    border-left-color: #fff; 
} 

我要麪包屑當它滾動到一個錨標記，當鏈接被點擊的資產淨值更新。家應該永遠在那裏，信息應該是第二，其他的應該是第三。

Answer 1

好吧，所以我試圖讓它起作用，目前看起來沒問題，所以我想給它添加一些動畫。我想我應該添加一個隱藏類，然後.show（）。animate（）？反正這裏是用的jsfiddle代碼：

(function($) { 

/** 
    * Copyright 2012, Digital Fusion 
    * Licensed under the MIT license. 
    * http://teamdf.com/jquery-plugins/license/ 
    * 
    * @author Sam Sehnert 
    * @desc A small plugin that checks whether elements are within 
    *  the user visible viewport of a web browser. 
    *  only accounts for vertical position, not horizontal. 
*/ 

    $.fn.visible = function(partial) { 

    var $t   = $(this), 
     $w   = $(window), 
     viewTop  = $w.scrollTop(), 
     viewBottom = viewTop + $w.height(), 
     _top   = $t.offset().top, 
     _bottom  = _top + $t.height(), 
     compareTop = partial === true ? _bottom : _top, 
     compareBottom = partial === true ? _top : _bottom; 

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop)); 

    }; 

})(jQuery); 

function updatecrumb(parent, page) { 
    var breadcrumb = $('.breadcrumb'); 
    var current = ''; 
    var active = ''; 
    if (parent) { 
    if (parent == 'empty') { 
     if (breadcrumb.find('.currentpage').length) { 
      breadcrumb.find('.currentpage').replaceWith(''); 
     } 
    } 
    else { 
     current += "<li class=\"currentpage\"><div><a href=\"#" + parent.children(':first-child')[0].name + "\"> " + parent.children(':first-child').children().text() + "</a></div></li>"; 
     if (breadcrumb.find('.currentpage').length) 
     { 
     breadcrumb.find('.currentpage').replaceWith(current); 
     } 
     else { 
     breadcrumb.append(current);  
     } 
    } 
    } 
    if (page) { 
    if (page == 'empty') { 
     if (breadcrumb.find('.active').length) { 
      breadcrumb.find('.active').replaceWith(''); 
     } 
    } 
    else { 
     if (page.attr('id') != "home") { 
     active += "<li class=\"active\"><div><a href=\"#" + page.children(':first-child')[0].name + "\"> " + page.children(':first-child').children().text() + "</a></div></li>"; 
     if (breadcrumb.find('.active').length) 
     { 
      breadcrumb.find('.active').replaceWith(active); 
     } 
     else { 
      breadcrumb.append(active); 
     } 
     } 
    } 

    } 
} 

$(window).scroll(function() { 
    var page, 
     parent, 
     parentcount = 0, 
     pagecount = 0; 
    $('.parent-page').each(function() { 
     if ($(this).visible(true)) { 
     parent = $(this); 
     parentcount += 1; 
     updatecrumb(parent); 
     } 
    }); 
    $('.page').each(function() { 
     if ($(this).visible(true)) { 
     page = $(this); 
     if (page.attr('id') != "home") { 
      pagecount +=1; 
     } 
     updatecrumb(null, page); 
     } 
    }) 
    if (parentcount == 0) { 
     updatecrumb('empty'); 
    } 
    if (pagecount == 0) { 
     updatecrumb(null, 'empty'); 
    } 
}); 

的的jsfiddle是在這裏：https://jsfiddle.net/6dnxcoet/4/ 而且ofcourse有改進的餘地，如果任何人對如何優化的想法，提高了代碼。請...不要退縮。