基于 jQuery 锚点的面包屑？

Question

所以，我有一个带有手风琴菜单的网站，该菜单使用锚标签来导航网站。

没有其他页面，只有一个页面，其中所有内容由锚点分隔。
我正在寻找一个面包屑，当滚动到特定的锚定标签（嵌套）或单击锚定链接时显示手风琴菜单（嵌套）。
如何在 jQuery 中创建类似的内容？
我正在考虑在名称标签中添加类之类的内容，以使用视口脚本中的 isvisible 在 jquery 中生成面包屑。
但是，当我想到它时，当用户复制并粘贴带有锚点的 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/ 当然还有改进的余地，所以如果有人对如何优化有想法，请改进代码。请...不要退缩。