Question

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

我正在研究FreeCodeCamp的课程，我创建了一个在codepen中运行良好的单页网站。但是，因为我已经拥有一个域/托管我移动它（并通过一些额外的工作让它正常工作）。

我目前的问题是导航栏。

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

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

所以，我认为我的问题已修复，直到我进入第二页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();
});

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

1 个答案: