时间戳

首页 > 解决方案 > 导航面板粘在屏幕顶部的问题

html - 导航面板粘在屏幕顶部的问题

问题描述

这是我正在处理的网站的 HTML 和 CSS 代码片段。滚动时，我无法让导航面板粘在屏幕顶部。这个想法是，当徽标部分（高度为 210 像素）滚动到视线之外时，导航面板会粘在屏幕顶部。我缺乏如何做到这一点的知识，并且由于某种原因，互联网上展示如何做到这一点的教程在我的项目中失败了。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>

标签： htmlcss

解决方案

你的代码有点乱。请记住始终关闭您打开的每个标签。您还需要了解一点 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");
  }
}

首先脚本检查用户何时滚动页面，然后在发生时触发一个函数。

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

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

我把所有的都放在了这里。

推荐阅读