Javascript для twitter-исправлена navbar bootstrap не работает при связывании нескольких страниц?

веб-сайт в вопросе

Хорошо, я не понимаю javascript или jquery, поэтому я задаю этот вопрос вам, ребята.

Я работаю на курсах от FreeCodeCamp, и я создал сайт одной страницы, который хорошо работал в codepen . но, так как я уже владел доменом/хостингом, я переместил его (и с некоторой дополнительной работой заставил его работать должным образом).

Моя проблема в настоящее время с navbar.

На индекс.html он работает правильно. (при таргетинге jumplinks на индекс.html-страница) он прокручивается вниз к нему и дает достаточно места над тегами h1, чтобы они не попали за навбар.

Я хотел добавить еще одну ссылку на мою страницу для моего резюме (которая не работала бы с текущим javascript), поэтому я должен был добавить класс к каждой из ссылок в моей navbar, которые были нацелены на ID на странице индекса, и обновил мой javascript из него, нацелив все теги a только на теги a С class=jumps.

Так, я думал, что моя проблема была исправлена, пока я не пошел на мою вторую страницу xp.формат html.
я изменил ссылки в navbar<a href="index.html#about>, чтобы он (надеюсь) пошел на страницу индекса, а затем прыгнул в правую часть страницы со ссылкой перехода. но это не сработало. это просто останется на моей странице xp.

Итак, я взял код из main.JS-файл и в индекс.JS, и связал его только со страницей индекса. это позволяет мне теперь правильно перемещаться между моими двумя страницами и ссылками перехода, но если вы находитесь на странице xp и нажимаете одну из ссылок перехода, это теперь заставляет текст h1 идти за навигационной панелью.

Надеюсь, это объяснение хорошее?

Таким образом, мне нужна помощь, чтобы исправить текущую проблему моих заголовков, идущих за моей navbar при поступлении с моей страницы xp (или других страниц, которые я добавляю в будущем)

Я был бы очень признателен за помощь в этом!

1 ответ

  1. использование css и jQuery (index.js)

    добавьте пользовательский css в вас main.стиль CSS. pad-top{ padding-top:5%;} и добавьте это в свой html, как это см. Класс

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

    и в вашем jQuery (index.js) заменить .топ-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();
    });