Фиксированные заголовки и якоря секций с bootstrap

Question

Клянусь, я перепробовал все, что мог придумать, чтобы решить эту проблему. У меня есть фиксированная панель навигации bootstrap, использующая прослушиватель событий javascript onscroll для применения фиксированного атрибута ... Я пытался использовать стиль в разметке, но он не дал желаемого эффекта. Конечно, это повторяющаяся проблема, но я перепробовал все рекомендации, а затем и некоторые. По крайней мере, все, что я мог найти. Проблема в том, что когда я использую любую внутреннюю ссылку #about, контент попадает под панель навигации. Я пробовал поля, абсолютные, относительные, топ -... px на .section2. Ничего из этого не сработало.

И, пожалуйста, я новичок в этом, поэтому любые решения, пожалуйста, укажите его c в моем коде, а не просто добавьте позицию в привязку. Дайте мне точный класс / идентификатор и что добавить или удалить, или оба. вот ссылка на страницу в реальном времени, чтобы увидеть, что происходит, когда вы нажимаете любую ссылку для раздела #about: портфолио # около

https://kingdomb.github.io/live_portfolio/#about

ПРИМЕЧАНИЕ. Приведенный ниже код не отображает ошибку должным образом, поэтому воспользуйтесь ссылкой выше.

ОБНОВЛЕНИЕ: 3/22 02:16 Мне удалось найти это:

Come on guys!

Это у меня есть очень простое решение, создайте свой якорь следующим образом:

<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>

С полем -50px, который я делаю, выше верхнего элемента привязки, а с полем 50px я пу sh вниз на следующий контент. Вам нужно только сделать тест с использованием пользовательских полей.

Работает как шарм. Я использую этот трюк на всех веб-сайтах по дизайну одной страницы.

НО, теперь один щелчок по ссылке about в панели навигации для #myanchor дает мне следующее:

И если я нажму на ту же самую навигационную ссылку, я получу небольшую поправку к этому:

СПАСИБО !!!

// When the user scrolls the page, execute myFunction
window.onscroll = function() {
  myFunction();
  myFunction2();
};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll 
position.Remove "sticky"
when you leave the scroll position

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

// Get the logo
var logo = document.getElementById("logo");

// Get the offset position of the logo
var logoSpin = logo.offsetTop;

// Add the logo-spin class to the navbar when you reach its scroll 
position.Remove "logo-spin"
when you leave the scroll position

function myFunction2() {
  if (window.pageYOffset >= logoSpin) {
    logo.classList.add("logo-spin");
  } else {
    logo.classList.remove("logo-spin");
  }
}

// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
//   .filter(function() {
//     return this.hostname != window.location.hostname;
//   })
//   .attr("target", "_blank");

//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
  for (var c = document.getElementsByTagName("a"), a = 0; a <
    c.length; a++) {
    var b = c[a];
    b.getAttribute("href") &&
      b.hostname !== location.hostname &&
      (b.target = "_blank");
  }
}
externalLinks();

html,
body {
  background-color: #E3E3E3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


/* HOME */

.section1 {
  background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  background-attachment: scroll;
  width: 100%;
  height: 100%;
}

.section1 .container {
  background-color: rgb(0, 0, 0, 0.65);
  min-height: -webkit-fill-available;
  min-width: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.home-btn {
  background-color: transparent;
  font-weight: 500;
  border-color: #8e0000;
  border-radius: 3px;
  color: #8e0000;
  margin-top: 35px;
  font-size: 1.12em;
  transform: translate(-50%, -50%);
  position: absolute;
  text-shadow: .1px .8px 1px black;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}


/* hover styling required !important */

.home-btn:hover {
  color: #8e0000 !important;
  border-color: #8e0000;
  font-size: 1.4em;
  border-width: 3px;
  font-weight: 600;
  text-shadow: .1px 2px 1px black;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.intro {
  color: white;
  font-size: 2.74em;
  text-shadow: .1px .8px 1px black;
}

.highlight {
  color: #8e0000;
  text-shadow: .1px .8px 1px black;
}


/* NAVIGATION */

.logo {
  display: inline-flex;
  flex-direction: row;
  -webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.navbar-brand {
  margin: 0px;
  padding: 0px 0px !important;
}

.logo-wrapper {
  color: white;
  font-size: 1.4em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 2px 1px black;
}

.logo-spin {
  -webkit-animation: spin 1s;
  animation: spin 3s;
  animation-iteration-count: 1;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateY(360deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
  }
}

@keyframes spin {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}

.navbar {
  background-color: #333;
  height: 65px;
  border-bottom: 6px solid #212529;
  border-top: 6px solid #212529;
}

#navbar {
  z-index: 9999;
}

.navbar-text {
  vertical-align: middle;
  margin-left: 200px;
  height: inherit;
}

@media only screen and (max-width: 860px) {
  .navbar-text {
    display: inline-block;
    align-items: center;
    margin-left: 30px;
  }
}

#navbar a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 30px;
  text-decoration: none;
  font-size: 1.2em;
  font-family: 'Raleway', sans-serif;
  text-shadow: .1px 1px 1px black;
}


/* ABOUT */

#about {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  text-shadow: .1px .8px 1px black;
  position: relative;
  height: -65px;
  margin-top: 200px;
}


/* .section2 {
  position: absolute;
  width: 100%;

} */

.section2 .row {
  background: url("../images/improved-teamwork-and- 
 collaboration_1887x741.jpg") center center no-repeat;
 height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 0%;
}

.section2 .card {
  background-color: RGBA(33, 37, 41, .80);
  color: white;
  min-height: -webkit-fill-available;
  height: 100%;
}

.section2 .card-block {
  font-weight: 520;
  width: 50%;
  margin: 0 auto;
  font-size: 25px;
  line-height: 50px;
  padding: 60px;
}

.section2 a {
  color: #9b0000;
  -webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}

.section2 .card-block {
  z-index: 8000;
  padding-right: 200px;
  padding-left: 0px;
  margin-left: 100px;
}

.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
  text-decoration: underline;
}

.section2 .btn {
  border-color: #8e0000;
  border-radius: 13px;
  border-width: 3px;
  font-weight: 500;
  font-size: 0.8em;
  transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}

.section2 .btn:hover {
  background-color: #8e0000;
  color: #212529;
  text-decoration: none;
}

#about {
  margin-bottom: 75px;
}

Answer 1

Причиной возникновения этой проблемы является то, что в разделе .section2 похоже, что у вас есть margin-top: 200px. Поэтому создаем это пространство. Теперь вы можете просто настроить соответственно.

Я буду осторожен при использовании полей. Использование их только в случае необходимости. Я редко использую это, только для незначительных настроек и отзывчивости. Если вы делаете правильный стиль, то не нужно использовать поля. Я бы взглянул на использование Flexbox . Это очень полезно при создании хороших функциональных макетов. Это отличный стартер для новых людей тоже. Чем раньше вы в нее попадете, тем проще будет для вас раскладка.

Я также заметил, что вы используете javascript для добавления внешних ссылок, которые открываются на новой странице. Для этого проще сделать что-то вроде <a href="someoutsidelink.com" target="_blank">. Вот справочник: w3schools

Что касается исправленной панели навигации, вот код, который вы должны использовать вместо того, который вы используете сейчас.

    var elementPosition = $("#navbar").offset();

    $(window).scroll(function() {
    if ($(window).scrollTop() > elementPosition.top) {
        $("#navbar")
        .css("position", "fixed")
        .css("top", "0");
    } else {
        $("#navbar").css("position", "static");
    }
    });

Edit One: Вот один из способов сделать это - добавить пустые теги <div class="blank">. Поместите его поверх открывающего тега <section class="section2">. затем добавьте height: 200px; width: 100%, создавая это пространство.

Answer 2

Я нашел решение! Я реорганизовал код в разделе О НА это:

<!-- ABOUT -->
<div class="blank" style="position: absolute">
  <a id="myanchor"></a>
</div>
<section id="about" class="section2">
  <div class="row-fluid">
    <div class="row">
      <div class="card ">
        <div class="card-block">
          <div class="card-title">
            <h1>Welcome, <a href="#">let's talk!</a></h1>
          </div>
          <div id="container">
            <p> I started independent web development two years ago, and haven't looked back. A              couple of things I love about coding are those moments when tough projects are                  complete, or discovering a solution to a difficult problem. Take a look at my
              <a href="#skills">skills</a>, and some of my recent <a                                         href="#projects">projects</a>. THANKS!
            </p>
            <a href="General_Resume.pdf" class="btn btn-outline-primary" target="__blank">Print              My Resume</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Обратите внимание, что я удалил начальное поле div html стиль.