Блог

Главная - Вопросы по программированию - неровное перемещение липкого заголовка

неровное перемещение липкого заголовка

#javascript #html #css

#javascript #HTML #css

Вопрос:

В настоящее время я создаю веб-сайт и столкнулся с проблемой: всякий раз, когда я прокручиваю свой липкий заголовок, страница переходит к нижней части следующего элемента вниз, кто-нибудь знает, почему это может быть?

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

 window.onscroll = function() {
  myFunction()
};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}  
 @import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Ubuntu Condensed);
body {
  margin: 0px;
  font-family: 'Roboto';
  background-color: white;
}

.header {
  padding: 10px 16px;
  background: white;
  color: black;
  width: 100%;
  border-bottom: 1px solid grey;
}

.content {
  padding-top: : 16px;
  padding-bottom: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky .content {
  padding-top: 102px;
}

nav>div>a {
  padding: 6px 20px;
}

h3:hover {
  color: rgb(128, 128, 128)
}

h3 {
  display: inline-block;
}

.banner {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 10px;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.header-text {
  width: 100%;
  text-align: right;
  margin-right: 25px;
}

.logo {
  margin-bottom: -80px;
}  
 <!DOCTYPE html>
<html>

<head>
  <title> Nick Pemberton - About </title>
  <link rel="preload" href="../js/java.js" as="script">
  <link rel="preload" href="../css/main.css" as="style">
  <link rel="prerender" href="Gallery.html">
  <link rel="prerender" href="about.html">
  <link rel="prerender" href="HomePage.html">
  <link rel="preload" href="../photos/kilc/banner.jpg" as="image">
  <link rel="icon" href="favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Nick Pemberton">
  <link rel="stylesheet" href="../css/main.css">
  <!-- Link to main.css -->
</head>
<!-- /head -->

<body>
  <nav class="header" id="myHeader"><img src="../photos/test.png" class="logo">
    <div class="header-text">
      <a href="HomePage.html">
        <h3>Home
          <!-- Home -->
        </h3>
      </a>
      <a href="Gallery.html">
        <h3>Gallery
          <!-- Gallery -->
        </h3>
      </a>
      <a href="about.html">
        <h3>About</h3>
      </a>
    </div>
  </nav>
  <!-- Nav Bar -->
  <content class="content">
    <img class="banner" src="../photos/kilc/banner.jpg"> A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
    not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually
    here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
    A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed
    it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch
    of text is usually here, removed it since it is not relevant.
  </content>
  <!-- Content -->

  <script src="../js/java.js">
  </script>

</body>
<!-- body -->

</html>
<!-- html -->

Ответ №1:

Вы используете пользовательский тег, content который создает проблему, поскольку по умолчанию он будет встроенным элементом и padding-top не будет работать должным образом. Используйте простой div или добавьте display:block к этому тегу:

 var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
window.onscroll=myFunction;  
 @import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Ubuntu Condensed);
body {
  margin: 0px;
  font-family: 'Roboto';
  background-color: white;
}

.header {
  padding: 10px 16px;
  background: white;
  color: black;
  border-bottom: 1px solid grey;
}

.content {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size:32px;
}

.sticky {
  position: fixed;
  top: 0;
  left:0;
  right:0;
}

.sticky .content {
  padding-top: 102px;
}

nav>div>a {
  padding: 6px 20px;
}

h3:hover {
  color: rgb(128, 128, 128)
}

h3 {
  display: inline-block;
}

.banner {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 10px;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.header-text {
  width: 100%;
  text-align: right;
  margin-right: 25px;
}

.logo {
  margin-bottom: -80px;
}  
 <nav class="header" id="myHeader">
  <div class="header-text">
    <a href="HomePage.html">
      <h3>Home
        <!-- Home -->
      </h3>
    </a>
    <a href="Gallery.html">
      <h3>Gallery
        <!-- Gallery -->
      </h3>
    </a>
    <a href="about.html">
      <h3>About</h3>
    </a>
  </div>
</nav>
<!-- Nav Bar -->
<div class="content">
   A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
  not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
  A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
  not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
  A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
  not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.

</div>
<!-- Content -->

Вы также можете упростить свой код и учитывать sticky положение вместо фиксированного:

 @import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Ubuntu Condensed);
body {
  margin: 0px;
  font-family: 'Roboto';
  background-color: white;
}

.header {
  padding: 10px 16px;
  background: white;
  color: black;
  border-bottom: 1px solid grey;
  position:sticky;
  top:0;
}

.content {
  padding-top:16px;
  padding-bottom: 16px;
  font-size:32px;
}


.sticky .content {
  padding-top: 102px;
}

nav>div>a {
  padding: 6px 20px;
}

h3:hover {
  color: rgb(128, 128, 128)
}

h3 {
  display: inline-block;
}

.banner {
  width: 100%;
  padding-top: 0px;
  padding-bottom: 10px;
}

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.header-text {
  width: 100%;
  text-align: right;
  margin-right: 25px;
}

.logo {
  margin-bottom: -80px;
}  
 <nav class="header" id="myHeader">
  <div class="header-text">
    <a href="HomePage.html">
      <h3>Home
        <!-- Home -->
      </h3>
    </a>
    <a href="Gallery.html">
      <h3>Gallery
        <!-- Gallery -->
      </h3>
    </a>
    <a href="about.html">
      <h3>About</h3>
    </a>
  </div>
</nav>
<!-- Nav Bar -->
<div class="content">
   A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
  not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
  A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
  not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.
  A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is
  not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant. A bunch of text is usually here, removed it since it is not relevant.

</div>
<!-- Content -->