javascript - 为什么不是位置 : sticky affecting my navbar?-6ren

javascript - 为什么不是位置 : sticky affecting my navbar?

转载作者：太空宇宙更新时间：2023-11-04 14:26:38

父元素没有溢出属性。父元素具有设置的高度。无论我尝试什么，导航栏都不会粘住。它也不适用于 JavaScript。我肯定错过了什么。下面是代码。有人请告诉我我做错了什么:

/* Body */
body{
	margin: 0;
	position: relative;
	height: 100%;
}
/* Header */
.header{
	font-family: sans-serif;
	font-weight: 900;
	background-color: #04042b;
	color: #de215a;
	text-align: center;
	font-size: 200%;
	width: 100%;
}
.header h1{
    margin: 0;
	line-height: 1;
	padding-top: 4%;
	padding-bottom: 4%;
}
/* Navigation Bar */
.navbar{
	background-color: #000005;
	position: sticky;
	top: 0;
	overflow: hidden;
}
.navbar a{
	float: left;
    color: #FFFFE0;
    text-align: center;
    text-decoration: none;
	font-size: 130%;
	padding: 2%;
}
.navbar a:hover{
	background-color:#E6E6FA ;
    color: black;
}
.navbar a.active{
	background-color: #4682B4;
    color: white;
}
article img{
	height: 100%
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	<meta http-equiv="refresh" content="30">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Stuff</title>
	<link rel="stylesheet" type="text/css" href="Mainsheet.css">
	<script src="Mainscript.js"type="application/javascript" ></script>
  </head>
  <body>
    <header>
	  <div class="header">
	    <h1>Stuff</h1>
	  </div>
	</header>
	<nav>
	  <div class="navbar">
	    <a class="active" href="">Home</a>
	    <a href="">Projects</a>
	    <a href="">News</a>  
		<a href="">About</a>
	    <a href="">Forum</a>
        <a href="">Contact</a>
	    <a href="">Funding&FAQ </a>
	  </div>
	</nav>
	<article>
	  <h3>Sticky Navigation Example</h3>
        <p>The navbar will stick to the top when you reach its scroll 
        position.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera 
        fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis 
        evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
        efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
	</article>
  </body>
</html>

最佳答案

尝试将您为 .navbar 设置的样式移动到父级 nav 根级元素(这样它就会粘在父级 body 上)。

nav {
    background-color: #000005;
    position: sticky;
    top: 0;
    overflow: hidden;
}

/* Body */
body{
	margin: 0;
	position: relative;
	height: 100%;
}
/* Header */
.header{
	font-family: sans-serif;
	font-weight: 900;
	background-color: #04042b;
	color: #de215a;
	text-align: center;
	font-size: 200%;
	width: 100%;
}
.header h1{
    margin: 0;
	line-height: 1;
	padding-top: 4%;
	padding-bottom: 4%;
}
/* Navigation Bar */
nav{
	background-color: #000005;
	position: sticky;
	top: 0;
	overflow: hidden;
}
.navbar a{
	float: left;
    color: #FFFFE0;
    text-align: center;
    text-decoration: none;
	font-size: 130%;
	padding: 2%;
}
.navbar a:hover{
	background-color:#E6E6FA ;
    color: black;
}
.navbar a.active{
	background-color: #4682B4;
    color: white;
}
article img{
	height: 100%
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
	<meta http-equiv="refresh" content="30">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Stuff</title>
	<link rel="stylesheet" type="text/css" href="Mainsheet.css">
	<script src="Mainscript.js"type="application/javascript" ></script>
  </head>
  <body>
    <header>
	  <div class="header">
	    <h1>Stuff</h1>
	  </div>
	</header>
	<nav>
	  <div class="navbar">
	    <a class="active" href="">Home</a>
	    <a href="">Projects</a>
	    <a href="">News</a>  
		<a href="">About</a>
	    <a href="">Forum</a>
        <a href="">Contact</a>
	    <a href="">Funding&FAQ </a>
	  </div>
	</nav>
	<article>
	  <h3>Sticky Navigation Example</h3>
        <p>The navbar will stick to the top when you reach its scroll 
        position.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera 
        fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis 
        evertitur eum. Affert laboramus repudiandae nec et. Inciderint 
        efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum 
        definitiones no quo, maluisset concludaturque et eum, altera fabulas 
        ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. 
        Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. 
        Eum no molestiae voluptatibus.</p>
	</article>
  </body>
</html>

关于javascript - 为什么不是位置 : sticky affecting my navbar?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49414297/

文章推荐： java - hibernate - 禁用 MySQLIntegrityConstraintViolationException

文章推荐： c++ - 使用 jpeg_read_raw_data 函数从 jpeg 文件中读取原始数据

文章推荐： javascript - 将可滚动的 div 聚焦到一个位置

java - 如何使用 LatLng 获取起始位置/位置。我确实有一个正在移动的当前位置/位置
我正在尝试获取从过去的 startposition/location 到当前移动的 currentposition/location 的距离(以米为单位)。我确实有工作正常的currentposit
javascript - 保存和加载 div 位置 - 缩放并保存在加载时改变 div 位置
所以我有一堆绝对覆盖的 div。用户通过在叠加层上拖动来创建方形 div。如果您要创建一个 div，然后放大和缩小，div 会保持在同一位置，因为它对叠加层是绝对的，如前所述。然而问题就出在这里。您
android - 在android中的显示器(屏幕)上查找 View 位置(位置)
我想找到 View 在显示屏幕上的位置。为此，我使用了 view.getLeft() 、view.getBottom() 、view.getRight() 等方法> , view.getTop()。
ios - UIScrollView - 需要 x 位置/宽度的约束，需要 y 位置/高度的约束
我有一个看起来像这样的 View 层次结构(基于其他答案和 Apple 的使用 UIScrollView 的高级 AutoLayout 指南): ScrollView 所需的2 个步骤是: 为 Scr
MySQL如何对一名学生的科目成绩进行排名/位置
所以我有一个名为 MARKS 的表，我有这些列 STUDENT_ID, CLASSFORM_NAME, ACADEMIC_YEAR, TERM, SUBJECT_NAME, TOTAL_MARKS
jQuery 位置
我有一个问题我无法理解，请帮助: 我开发了带有图像的 html 页面，并使用 jQuery UI 帮助使它们可拖动，我将这些图像位置设置为相对位置并给出了左侧和顶部像素，这是页面的链接 http://
IE11中的CSS动画背景-位置
我正在尝试创建一个 CSS 动画，它在 sprite 表中循环播放 16 个图像，给人一种幽灵“漂浮”的错觉。动画通过在 background-position 位置之间移动以显示不同状态的幽灵来实现
Flutter WebView 位置
我正在创建这个网站的 WebView https://nearxt.com/打开时询问位置但是当我使用此链接在 flutter 中创建 webview 时那么它就无法定位我还在应用程序中定义了位置，但
swift - NSWindow 位置
我正在以编程方式创建一个需要跨越 2 个屏幕的窗口。正在创建的窗口的大小是正确的，但窗口大约从第一个屏幕的一半开始。我可以将它拖回第一个屏幕的开头，NSWindow 非常适合。我只需要知道在窗口的起
javascript - 位置 "/"的匹配叶路由没有元素
位置“/”的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值，从而导致一个“空”页面 //App.js File import { BrowserRouter as Router, Routes
ubuntu - 向网络公开目录/位置
我有一个运行 Ubuntu 和 Apache 的 VPS 例如，假设地址是:5.5.5.5 在 VPS 上，我有一个名为 eggdrop 的用户(除了我的 root 用户)。用户 eggdrop 有
JLabel ImageIcon 位置
我有一个 JLabel与 ImageIcon ，我使用 setIcon() JLabel中的函数. ImageIcon然后上来，坐在我的JLabel 的文字左侧.是否有可能拥有 ImageIcon在文
Graphviz:xlabel 位置
我的图中有节点，它们的 xlabels 位于它们的左上方。我怎样才能改变这个位置？我希望 xlabels 正好位于节点本身的旁边。最佳答案 xlp是你想要的属性，但它没有做任何事情。你不能改变位置
VIM 自定义函数定义/位置
我对基本的 VIM 功能有疑问:(我尝试谷歌搜索但找不到答案) 如何列出所有自定义功能。(我做了 :function 并且不能找到我的自定义函数) 如何获得自定义函数列表中的函数(或它们的存储位置)。
Php 位置 ("some other page")
我是 PHP 的新手，虽然我一直在搜索，但我不知道该怎么做。我知道可以使用 Location("some page") 进行重定向。我还读到，只要没有向用户显示任何内容，它就可以工作。我想做的是:
jquery jgrowl 位置
如果在 jgrowl.css 中位置更改为“center”，我如何将其覆盖为默认值，即“top-right” $.jGrowl(data, { header: 'data', an
iphone - UISwipeGestureRecognizer 位置
我需要根据用户是否滑动屏幕顶部、屏幕中间或屏幕底部来触发不同的事件。我正在尝试找出最好/最简单的方法来做到这一点，因为我很确定没有办法从 UISwipeGestureRecognizer 获取位置。
delphi - 如何获取由delphi生成的EXE的VMT表的地址(位置)
我需要枚举用delphi编写的外部应用程序中使用的类，因此我需要访问VMT表以获取该信息，但是我找不到任何有关如何在exe（由delphi生成）文件中找到VMT（虚拟方法表）的位置（地址）的文档。
delphi - 不区分大小写位置
在 D2010 (unicode) 中是否有像 Pos 这样不区分大小写的类似函数？我知道我可以使用 Pos(AnsiUpperCase(FindString), AnsiUpperCase(Sou
位置:固定在reveal.js中
我正在尝试为我的reveal.js 演示文稿制作一个标题，该标题会粘贴在屏幕顶部。标题中的内容在每张幻灯片的基础上都是动态的，因此我必须将标记放在 section 标记中。显然，如果标记在 sect

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 为什么不是位置 : sticky affecting my navbar?