Панель навигации прилипает, но я следовал некоторым основным инструкциям, как сделать ее прикрепленной, которая включала position: fixed; width: 100%; top: 0; Но проблема в том, что она покрывает часть страницы, которая является высотой ее (40px) Теперь, когда кто-то клики по ссылкам панели навигации (которые связаны с <h3>), ссылки <h3> закрываются панелью навигации. Я не знаю, как это исправить.

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="./stylesheets/main.css?v6.00000000000016" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
  <link href="./favicon.ico" rel="icon" type="image/ico">
  <title>Test</title>
</head>

<body>
  <header>
    <nav>
      <a class="link linkanim" href="#introduction">Introduction</a>
      <a class="link linkanim" href="#begin">Getting Started</a>
    </nav>
  </header>
  <main>
    <section>
      <h1>Test</h1>
      <div class="text-container">
        <p id="notice"><span style="font-weight: bold;">NOTE</span>: This website will not work/render correctly on mobile devices, I'm just getting started on advanced HTML and CSS. Besides that, this website isn't interactive. Means that I haven't implemented JavaScript. I'm learning that next.</p>
        <h3 id="introduction">Introduction:</h3>
        <p id="hello">Content</p>
        <p id="improvements">Content mail to send emails:<a class="email-address" href="You seriously thought i was going to forget to remove my email here? hehheheheh!">Click here to send an E-Mail...</a></p>
      </div>
    </section>
    <section>
      <div class="text-container">
        <h3 id="begin">Let's begin</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </section>
  </main>
  <footer>
    <div class="icocredit">Title Favicon made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> | Made by TimmSkiller (not Copyrighted) | My first real Website</div>
  </footer>
</body>

</html>

CSS:


* {
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

header {
  box-sizing: border-box;
  max-height: 40px;
}

main {
  box-sizing: border-box;
}

main section h1 {
  margin-top: 70px;
  text-align: center;
  font-size: 30px;
  font-weight: 400;
}

main section div h3 {
  text-align: left;
  height: calc(23px + 19px);
}

.text-container p {
  word-wrap: break-word;
}

.text-container {
  max-width: 900px;
  margin: 0 auto;
}

#hello {
  height: 285px;
}

#notice {
  height: 76px;
}

#improvements {
  height: calc(19px + 133px)
}

nav {
  position: fixed;
  width: 100%;
  top: 0;
  padding: 5.5px;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}

.email-address {
  text-decoration: none;
}

.link {
  padding: 5.5px;
  display: inline-block;
  font-size: 15px;
  color: black;
  text-decoration: none;
  border-radius: 12px;
  transition-duration: 0.75s;
}

.link:hover {
  background-color: #bebebe;
}

.link:active {
  background-color: #909090;
}

.icocredit {
  position: relative;
  font-size: small;
  bottom: 1px;
  left: 1px;
  display: inline-block;
}

.icocredit a {
  text-decoration: none;
}

Я не хочу, чтобы навигационная панель закрывала элементы h3, поэтому они читабельны.

РЕДАКТИРОВАТЬ: Я пробовал добавить padding-top: 40px на body {}, не работает. Ссылка для подтверждения: GIPHY Изменить 4: код изменился, и вопрос тоже (50 пикселей> 40 пикселей)

0
user11918199 7 Сен 2019 в 20:45

3 ответа

Лучший ответ

Чтобы избежать использования JavaScript, вы можете просто добавить padding-top: 50px к элементам заголовка

0
hisbvdis 7 Сен 2019 в 18:13

Это может быть сделано с использованием JavaScript, без изменения вашей HTML-структуры, более чистым способом.

<script type="text/javascript">
window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 50); // Scroll the page 50 px up
});
</script>
0
Verma Jr. 7 Сен 2019 в 18:03

Если вы хотите только решение на основе CSS, то вы можете добавить этот код в свой раздел CSS

#introduction, #begin
{
  padding-top:50px;
}

Результат

html {
  padding-top: 50px;
  height: calc(100% - 50px);
}

* {
  margin: 0;
  padding: 0;
  font-family: Roboto;
}

header {
  box-sizing: border-box;
  max-height: 50px;
}

main {
  box-sizing: border-box;
}

main section h1 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 400;
}

main section div h3 {
  text-align: left;
  height: calc(23px + 19px);
}

.text-container p {
  word-wrap: break-word;
}

.text-container {
  max-width: 900px;
  margin: 0 auto;
}

#hello {
  height: 285px;
}

#notice {
  height: 76px;
}

#improvements {
  height: calc(19px + 133px);
}

nav {
  position: fixed;
  width: 100%;
  top: 0;
  padding: 5.5px;
  background-color: #e5e5e5;
  margin-bottom: 20px;
}

.email-address {
  text-decoration: none;
}

.link {
  padding: 5.5px;
  display: inline-block;
  font-size: 15px;
  color: black;
  text-decoration: none;
  border-radius: 12px;
  transition-duration: 0.75s;
}

.link:hover {
  background-color: #bebebe;
}

.link:active {
  background-color: #909090;
}

.icocredit {
  position: relative;
  font-size: small;
  bottom: 1px;
  left: 1px;
  display: inline-block;
}

.icocredit a {
  text-decoration: none;
}
#introduction, #begin
{
  padding-top:50px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="./stylesheets/main.css?v6.00000000000016" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
  <link href="./favicon.ico" rel="icon" type="image/ico">
  <title>Test</title>
</head>

<body>
  <header>
    <nav>
      <a class="link linkanim" href="#introduction">Introduction</a>
      <a class="link linkanim" href="#begin">Getting Started</a>
    </nav>
  </header>
  <main>
    <section>
      <h1>Test</h1>
      <div class="text-container">
        <p id="notice"><span style="font-weight: bold;">NOTE</span>: This website will not work/render correctly on mobile devices, I'm just getting started on advanced HTML and CSS. Besides that, this website isn't interactive. Means that I haven't implemented JavaScript.
          I'm learning that next.</p>
        <h3 id="introduction">Introduction:</h3>
        <p id="hello">Content</p>
        <p id="improvements">Content mail to send emails:<a class="email-address" href="You seriously thought i was going to forget to remove my email here? hehheheheh!">Click here to send an E-Mail...</a></p>
      </div>
    </section>
    <section>
      <div class="text-container">
        <h3 id="begin">Let's begin</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </section>
  </main>
  <footer>
    <div class="icocredit">Title Favicon made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> | Made by TimmSkiller (not Copyrighted) | My first real Website</div>
  </footer>
</body>

</html>

Если вы не хотите изменять структуру кода или стиль, тогда вы можете пойти на решение, предоставленное другими, используя JavaScript

0
Sidharth Gusain 7 Сен 2019 в 19:23