链接多个页面时，twitter-bootstrap的固定导航栏的Javascript不起作用吗？

Question

有问题的网站

好吧，我不懂javascript或jquery，所以，我向你们提出这个问题。

我正在研究FreeCodeCamp的课程，并且创建了一个页面页面，该页面在Codepen中效果很好。 但是，由于我已经拥有一个域/主机，因此将其移至其他位置（并做了一些额外的工作才能使其正常工作）。

我目前的问题是关于导航栏。

在index.html上，它可以正常工作。 （在index.html页上定位跳转链接时），它会向下滚动并在h1标签上方留出足够的空间，这样它们就不会在导航栏后面。

我想为履历表添加另一个链接到我的页面（不适用于当前的javascript），因此我不得不向导航栏中的每个链接添加一个类，这些链接以索引页面上的id为目标，并更新了javascript将所有a标签定位为class = jumps的a标签。

因此，我认为自己的问题已解决，直到我转到第二页xp.html。 我将导航栏中的链接更改为<a href="index.html#about>以便（希望）转到索引页面，然后使用跳转链接跳转到页面的右侧。那没有用，只会留在我的XP页面上。

因此，我将代码从main.js文件中取出，放入了index.js文件中，并将其仅链接到索引页面。 现在，我可以在我的两个页面和跳转链接之间正确导航，但是如果您在xp页面上并单击其中一个跳转链接，则现在会使h1文本进​​入导航栏的后面。

我希望这个解释是好的？

因此，当我从xp页面（或将来添加的其他页面）中获取标题时，我需要帮助来解决标题的问题

我真的很感谢帮助！

Answer 1

使用CSS和jQuery（index.js）

在您的main.css .pad-top {padding-top：5％;}中添加一个自定义CSS，然后像这样在您的html中添加它

 <div  id="webfolio" class="row c-wrapper smooth nomargin pad-top"> 

并在您的jQuery（index.js）中将.top-80替换为5

而且，如果您仅使用jQuery（index.js）（如果您可以简化此查询，但我只想分享完整内容）

function anchorScroll(fragment) {
    "use strict";
    var amount, ttarget;
    amount = $('nav').height();
    ttarget = $('#' + fragment);
    $('html,body').animate({ scrollTop: ttarget.offset().top - amount }, 1000);
    return false;
}

function outsideToHash() {
    "use strict";
    var fragment;
    if (window.location.hash) {
        fragment = window.location.hash.substring(1);
        anchorScroll(fragment);
    }
}

function insideToHash(nnode) {
    "use strict";
    var fragment;
    fragment = $(nnode).attr('href').substring(1);
    anchorScroll(fragment);
}

$(document).ready(function () {
    "use strict";
    $("a[href^='#']").bind('click',  function () {insideToHash(this); });
    outsideToHash();
});