Question

刚刚学习html，css和javascript，并且在我的代码中使用<abbr>标记以及scrollspy.js（来自{ {3}}）监视已查看段落的设置并显示缩写/首字母缩略词的定义。

当我刚刚学习bootstrap的基础时，我想知道脚本本身是否可能或者是否需要进行一些修改（如果是这样，请发布一个代码示例，thx！）

Answer 1

如果您查看scrollspy.js的来源，您实际上看不到任何对标题的引用。它的工作原理是查看导航链接和相应的元素，以获取有关内容元素与导航之间关系的线索。以下是documentation

中的内容

导航

<a href="#fat">@fat</a>

对于

部分

<h4 id="fat">@fat</h4>

现在要考虑一件事，<h4>元素是块级别，因此它们占用了整行。内联元素可以位于同一行，因此可能无法根据可见部分查看应突出显示哪个定义。对于你想要做的事情，我认为你需要创建自己的JavaScript。

这是一种方法（虽然它需要一些调整才能满足您的确切需求，它支持内联abbr元素，每行每行甚至多个定义）（这里是working demo）

这是JavaScript：

var mapTerms = function () {
    /*grab all of the <abbr>s with terms associated with them, they can move anytime the browser is resized*/
    var terms = [];
    $('abbr[data-term]').each(function () {
        var term = $(this);
        terms.push({
            term: term.data('term'),
            height: term.offset().top,
            visible: false,
            element: term
        });
    });
    return terms;
},
terms = [],
    /*Keep a globally accessible list*/
    $body = $('body'); /*need a reference to the body for performance*/

$(window).on('scroll', function () {
    /*listen to the scroll event*/
    var height = $(document).scrollTop(),
        i;

    for (i = 0; i < terms.length; i++) {
        if (terms[i].visible) {
            if (terms[i].height < height || terms[i].height > (height + 50)) {
                terms[i].visible = false;
                terms[i].element.removeClass('defined');
                $('div[data-term=' + terms[i].term + ']').hide();
            }
        } else {
            if (terms[i].height > height && terms[i].height < (height + 50)) {
                terms[i].visible = true;
                terms[i].element.addClass('defined');
                $('div[data-term=' + terms[i].term + ']').show();
            }
        }
    }
}).on('resize', function () {
    /*listen to the resize event*/
    console.log('mapping...');
    terms = mapTerms();
}).trigger('resize').trigger('scroll');

这里有一些CSS隐藏并突出显示术语及其定义（以及保持定义可见）：

abbr.defined {
    background: red;
}
.definition {
    display: none;
}
#definitions {
    position: fixed;
}

它的工作方式是查找具有指向完整定义的数据元素的<abbr>，如下所示：

<abbr data-term='blog' title='Webblog'>blog</abbr>

其中每一个都指向一个包含定义的div（填充在示例中底部的侧边栏中）

<div class='definition' data-term='blog'>
  <h4>Blog</h4>

  <p>A blog (a truncation of the expression weblog) is a discussion or informational site published on the World Wide Web and consisting of discrete entries ("posts") typically displayed in reverse chronological order (the most recent post appears first).</p>
  <p><i>source <a href='http://en.wikipedia.org/wiki/Blog'>Wikipedia</a></i></p>
</div>

然后，当您调整浏览器大小时，onResize代码会构建所有<abbr>元素的地图，当您滚动onScroll代码时，您的当前位置会尝试弄清楚每个术语是否可见（它使用的是一个非常简单的可见定义，它位于浏览器的前50个像素内）。在制作中，您可能想要测试它是否在滚动顶部和窗口高度之间，或者考虑用户向下滚动以阅读更多定义但将该术语推离屏幕。 100％正确是一件很棘手的事情，但这会让你更进一步。

在除标题之外的其他标签上制作scrollspy间谍

1 个答案: