Question

我创建了一个网页。有一个标题，该标题将始终位于顶部。为此，我使用了绝对定位。现在，当我滚动页面时，标题可以正常工作。它始终保持在顶部。但是内容的某些顶部位于标题下。那我该怎么办？？

Answer 1

在这种情况下，您不应该应用absolute定位，因为它会告诉页面将其放置在所有元素之上，而与其他元素无关。您应该改用position: fixed;。

这是带有此“粘性”标题的菜单的简短示例：

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

* {
  padding: 0;
  margin: 0;
}
.content {
	padding:16px;
}
.sticky {
	position: fixed;
	top: 0;
	width: 100%;
}
.sticky + .content {
	padding-top: 60px;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<div id="navbar" class="w3-bar w3-black" style="background:#000;z-index:1;">
	<a href="#" class="w3-button w3-bar-item w3-left w3-padding-16">MAIN MENU</a>
	<a href="#t" class="w3-button w3-bar-item w3-right w3-padding-16">CONTACT</a>
	<a href="#" class="w3-button w3-bar-item w3-right w3-padding-16">ABOUT</a>
	<a href="#" class="w3-button w3-bar-item w3-right w3-padding-16">CONTENT</a>
	<a href="#" class="w3-button w3-bar-item w3-right w3-padding-16">HOME</a>
</div>

<div class="content" class="w3-content w3-padding" style="max-width:1564px">

<img src="https://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" width="500" height="400" />
<br>
<img src="https://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" width="500" height="400" />
</div>

这将使条形图停留在顶部而不会在开始时覆盖图像或任何内容，并且将使整个CSS稳定，因为其位置按标准是block。希望对您有帮助。

Answer 2

您应该将标题位置固定在顶部：0;在CSS中，即

#navbar{
         postion:fixed;
         top:0;
         height:100px;
}

并且您的内容将其设置为超过导航栏高度的边距顶部

#content{
         margin-top:100px;
}

我将网页标题固定在顶部。那为什么内容要放在标题下面呢？

2 个答案: