Question

这是我正在处理的网站的HTML和CSS代码段。滚动时，导航面板无法粘在屏幕顶部。这个想法是，当徽标部分（高度为210像素）滚动到视线之外时，导航面板会粘贴在屏幕顶部。我缺乏有关如何执行此操作的知识，由于某种原因，Internet上显示如何执行此操作的教程在我的项目中失败了。 PS。这是一个学校项目，请轻松进行：D

CSS代码段：

#logo
{

	width:auto;
	height:210px;
	text-align:center;
	padding-top:10px;
	border-bottom:4px solid #088A08;
	background-color:rgba(0, 255, 64, 0.8);
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
#all
{
	height:700px;
}
#content_container
{
	margin-left:auto;
	margin-right:auto;
	width:auto;
	background-color:red;
}
#nav
{
	height:auto;
	background-color:rgba(0, 255, 64, 0.8);
	margin-top:25px;
	margin-left:25px;
	width:10%;
	padding: 10px;
	border:4px solid #088A08;
	border-radius:10px;
	opacity:8;	
	float:left;
}
.nav_button
{
	border:2px solid #088A08;
	margin-bottom:10px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	border-radius:10px;
	padding:3px;
	width:auto;
}


HTML code snippet:

<body>
  <div id="logo">
    <img src="logo.png">
  </div>
  <div id="all">
    <div id="content_container">
      <div id="nav">
        <b>
		Spis Treści:
		<a href="#podstawy"><div class="nav_button">Podstawy</div></a>
		<a href="#obrazy"><div class="nav_button">Wstawianie Obrazków</div></a>
		<a href="#tabele"><div class="nav_button">Wszystko o Tabeli</div></a>
		<a href="#listy"><div class="nav_button">Rodzaje List</div></a>
		<a href="#edycja"><div class="nav_button">Edytowanie Tekstu</div></a>
		<a href="#tlo"><div class="nav_button">Tło, Kolor</div></a>
		<a href="#uk"><div class="nav_button">Uwagi Końcowe</div></a>
		</b>
      </div>

Answer 1

您的代码有些混乱。记住要始终关闭打开的每个标签。另外，您需要了解一些JavaScript才能使其正常工作。我从中学到很多东西的一个很好的例子是

https://www.w3schools.com/howto/howto_js_sticky_header.asp

页面上解释了javascript代码，但我要解释一下

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

var navbar = document.getElementById("nav");
var sticky = navbar.offsetTop;

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

首先，脚本检查用户何时滚动页面，然后在页面滚动时触发功能。

然后计算导航栏从顶部的偏移量（距离）。

最后，函数本身在用户滚动页面时触发。如果用户滚动相同的距离，然后滚动偏移量（=>），则它将粘性类应用于导航栏，否则将其删除。

我把here全部放在一起。

导航面板粘到屏幕顶部的问题

1 个答案: