粘页眉锯齿运动

粘页眉锯齿运动

关注
发信
关注(28)粉丝(399)

javascript - 粘页眉锯齿运动

我当前正在创建一个网站，并且遇到问题，每当我用粘性标题滚动时，页面就会跳到下一个元素的底部，有人知道为什么会这样吗？

我尝试更改页面上基本上所有元素的填充，包括横幅，标题，文本本身，甚至锚元素，但似乎没有任何方法可以解决我的问题。



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 -->

最佳答案

您正在使用一个自定义标签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 -->

关于javascript - 粘页眉锯齿运动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55231134/

10-09 21:28
Powered by LMLPHP ©2024 粘页眉锯齿运动 0.032492