javascript - HTML - 标题上方的导航菜单-6ren

javascript - HTML - 标题上方的导航菜单

转载作者：行者123 更新时间：2023-12-02 21:03:34

我目前正在 Github ( Githug Page ) 上构建我的网页，但我在使用顶部导航菜单时遇到了一些问题。如您所见，向下滚动时，菜单消失，向上滚动时，菜单再次出现。尽管如此，我想让行为更加简单，也就是说，使其相对于 header 固定。换句话说，我只是希望菜单出现在页面顶部，就像另一个元素一样。我不希望菜单跟随滚动。看起来很简单，但我最终没有得到结果。

这是我当前的main.js。

(function($) {

	var	$window = $(window),
		$body = $('body');

	// Breakpoints.
		breakpoints({
			xlarge:   [ '1141px',  '1680px' ],
			large:    [ '981px',   '1140px' ],
			medium:   [ '737px',   '980px'  ],
			small:    [ '481px',   '736px'  ],
			xsmall:   [ '321px',   '480px'  ],
			xxsmall:  [ null,      '320px'  ]
		});

	// Play initial animations on page load.
		$window.on('load', function() {
			window.setTimeout(function() {
				$body.removeClass('is-preload');
			}, 100);
		});

	// Scrolly.
		$('.scrolly').scrolly();

})(jQuery);

/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header_nav").style.top = "0";
  } else {
    document.getElementById("header_nav").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

在index.html文件中，您可以看到重要的部分是header和header_nav。

<!DOCTYPE HTML>
<!--
	Photon by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Eduardo Alvarado</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
		<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>
	<body class="is-preload">
		
		<!-- Header Menu -->
			<section id="header_nav">	
				<nav id="nav">
					<div id="navbar">
						<ul>
							<li><a href="index" class="button small"><p style="color:white">Home</p></a></li>
							<li><a href="" class="button small"><p style="color:white">Research</p></a></li>
							<li><a href="" class="button small"><p style="color:white">Game-dev</p></a></li>
							<li><a href="photography" class="button small"><p style="color:white">Photography</p></a></li>
						</ul>
					</div>
				</nav>
			</section>
		
		<!-- Header -->
			<section id="header">	
				<div class="inner">			
					<span><img src="/images/car_final_256_header.gif"></span>
					<h1>Hi, I'm <strong>Eduardo Alvarado</strong>.</h1>
					<h1>A passionate software engineer who develops intelligent<br />
					cars during the day and loves to design<br />
					game-focus art and applications in his spare-time.</h1>
					<br />
					<p>Want to contact me? Send me a message at <a href="mailto:alvaradopinero.eduardo@gmail.com">alvaradopinero.eduardo@gmail.com</a>.</p>
					<ul class="actions special">
						<li><a href="#one" class="button scrolly">Discover</a></li>
					</ul>
				</div>
			</section>

		<!-- One -->
			<section id="one" class="main style1">
				<div class="container">
					<div class="row gtr-150">
						<div class="col-6 col-12-medium imp-medium">
							<header class="major">
								<h2>Background</h2>
							</header>
							<p align="justify">I am a first year PhD Researcher at <a href='https://www.daimler.com/career/about-us/insights/research-development/'>Daimler AG</a> in Stuttgart, Germany. My research is centered on robust perception for human activity recognition. Prior joininig Daimler, I graduated with a master's degree in <b>Embedded Systems Engineering</b>, with a major in Artificial Intelligence and Autonomous Intelligent Systems from <a href='https://www.uni-freiburg.de/'>Albert-Ludwigs-Universität Freiburg</a>, and with a bachelor's degree in <b>Electronics and Automation Engineering</b> from <a href='https://www.uc3m.es/home'>Universidad Carlos III</a> in Madrid.</p>
						</div>
						<div class="col-6 col-12-medium">
							<span class="image fit"><img src="images/profile_bg_1920_1080.png" alt="" style="padding-top: 12px" /></span>
					</div>
				</div>
			</section>

		<!-- Two -->
			<section id="two" class="main style2">
				<div class="container">
					<div class="row gtr-150">
						<div class="col-6 col-12-medium">
							<ul class="major-icons">
								<li><span class="icon solid style4 major fa-laptop-code"></span></li>
								<li><span class="icon solid style2 major fa-microchip"></span></li>
								<li><span class="icon solid style3 major fa-brain"></span></li>
								<li><span class="icon solid style5 major fa-gamepad"></span></li>
							</ul>
						</div>
						<div class="col-6 col-12-medium">
							<p align="justify">I have dedicated my academic career to the field of robotics, with special interest in AI-based Perception and Behavior Planning applied to intelligent-mobility. I wrote my master's thesis at <a href='https://www.bosch.com/research/'>Robert Bosch GmbH</a> on DL sensor-fusion architectures for Object Detection and Tracking, under the supervision from <a href='https://scholar.google.com/citations?user=2mv2dDkAAAAJ&hl=en'>Prof. Dr. Joschka Boedecker</a> and <a href='https://scholar.google.com/citations?user=LcARjz0AAAAJ&hl=en'>Prof. Dr. Abnihav Valada</a>. I also worked as development-intern at <a href='https://www.zf.com/mobile/en/homepage/homepage.html'>ZF Friedrichshafen</a> on the design of ROS SW-tools for self-driving vehicles. Additionally, I have been working as research assistant for Autonomous Intelligent Systems at the university, on the development of SLAM algorithms and Autonomous Driving simulations.</p>
							<p align="justify">I dedicate my day to day to my other great passion too, game-related development and 2D/3D design. Since I was a child, I have always loved bringing to reality dream worlds, characters and landscapes only possible in one's imagination. Little by little, I try to learn more about design, gameplay and visual programming.</p>						</div>
						</div>
					</div>
				</div>
			</section>

		<!-- Three -->
			<section id="three" class="main style1 special">
				<div class="container">
					<header class="major">
						<h2>My work</h2>
					</header>
					<div class="row gtr-150">
						<div class="col-4 col-12-medium">
							<span class="image fit"><img src="images/pic02.jpg" alt="" /></span>
							<h3>Research and Academic Service</h3>
							<p>Publications, preprints, SW/HW proyects and news.</p>
							<ul class="actions special">
								<li><a href="#" class="button">More</a></li>
							</ul>
						</div>
						<div class="col-4 col-12-medium">
							<span class="image fit"><img src="images/pic03.jpg" alt="" /></span>
							<h3>Game Development</h3>
							<p>Game applications, 2D/3D design and visual programming.</p>
							<ul class="actions special">
								<li><a href="#" class="button">More</a></li>
							</ul>
						</div>
						<div class="col-4 col-12-medium">
							<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
							<h3>Photography</h3>
							<p>A small portfolio of my favorite trips and places.</p>
							<ul class="actions special">
								<li><a href="/photography" class="button">More</a></li>
							</ul>
						</div>
					</div>
				</div>
			</section>

		<!-- Four -->
			<!--
			<section id="four" class="main style2 special">
				<div class="container">
					<header class="major">
						<h2>Ipsum feugiat consequat?</h2>
					</header>
					<p>Sed lacus nascetur ac ante amet sapien.</p>
					<ul class="actions special">
						<li><a href="#" class="button wide primary">Sign Up</a></li>
						<li><a href="#" class="button wide">Learn More</a></li>
					</ul>
				</div>
			</section>
			-->
		
		<!-- Footer -->
			<section id="footer">
				<ul class="icons">
					<li><a href="docs/CV.pdf" class="icon solid alt fa-id-card"><span class="label">CV</span></a></li>
					<li><a href="mailto:alvaradopinero.eduardo@gmail.com" class="icon solid alt fa-envelope"><span class="label">Email</span></a></li>
					<li><a href="https://github.com/edualvarado" class="icon brands alt fa-github"><span class="label">GitHub</span></a></li>
					<li><a href="#" class="icon brands alt fa-google"><span class="label">Google Scholar</span></a></li>
				</ul>
				<ul class="copyright">
					<li>&copy; Untitled</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
				</ul>
			</section>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>

最后是 css 的相应部分。

/* Header */

	#header {
		padding: 9em 0 9em 0 ;
		background-color: #4686a0;
		color: rgba(255, 255, 255, 0.75);
		background-attachment: fixed,							fixed,							fixed;
		background-image: url("images/overlay2.png"), url("images/overlay3.svg"), linear-gradient(45deg, #9dc66b 5%, #4fa49a 30%, #4361c2);
		background-position: top left,						center center,					center center;
		background-size: auto,							cover,							cover;
		overflow: hidden;
		position: relative;
		text-align: center;
	}

		#header a {
			border-bottom-color: rgba(255, 255, 255, 0.5);
		}

			#header a:hover {
				color: #ffffff;
			}

		#header h1, #header h2, #header h3, #header h4, #header h5, #header h6, #header strong, #header b {
			color: #ffffff;
		}

		#header header p {
			color: #ffffff;
		}

		#header header.major:after {
			background: #ffffff;
		}

		#header input[type="submit"],
		#header input[type="reset"],
		#header input[type="button"],
		#header button,
		#header .button {
			box-shadow: inset 0 0 0 1px #ffffff;
			color: #ffffff !important;
		}

			#header input[type="submit"]:hover,
			#header input[type="reset"]:hover,
			#header input[type="button"]:hover,
			#header button:hover,
			#header .button:hover {
				background-color: rgba(255, 255, 255, 0.125);
			}

			#header input[type="submit"]:active,
			#header input[type="reset"]:active,
			#header input[type="button"]:active,
			#header button:active,
			#header .button:active {
				background-color: rgba(255, 255, 255, 0.25);
			}

			#header input[type="submit"].primary,
			#header input[type="reset"].primary,
			#header input[type="button"].primary,
			#header button.primary,
			#header .button.primary {
				background-color: #ffffff;
				box-shadow: inset 0 0 0 1px #ffffff !important;
				color: #4686a0 !important;
			}

				#header input[type="submit"].primary:hover,
				#header input[type="reset"].primary:hover,
				#header input[type="button"].primary:hover,
				#header button.primary:hover,
				#header .button.primary:hover {
					background-color: rgba(255, 255, 255, 0.125) !important;
					color: #ffffff !important;
				}

				#header input[type="submit"].primary:active,
				#header input[type="reset"].primary:active,
				#header input[type="button"].primary:active,
				#header button.primary:active,
				#header .button.primary:active {
					background-color: rgba(255, 255, 255, 0.25) !important;
				}

		#header ul.major-icons li .icon {
			border-color: #ffffff;
		}

		#header .icon.major {
			color: #ffffff;
		}

		#header h1 {
			margin: 0;
		}

		#header p {
			margin: 1em 0 0 0;
		}

		#header .actions {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			margin-top: 2.5em;
			margin-left: 0;
			position: relative;
		}

			#header .actions li:first-child {
				padding-left: 0;
			}

			#header .actions:after {
				background: #ffffff;
				content: '';
				height: 100vh;
				left: 50%;
				position: absolute;
				top: 100%;
				width: 1px;
			}

		#header .inner {
			-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
			-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
			-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
			transition: transform 1.5s ease, opacity 2s ease;
			-moz-transition-delay: 0.25s;
			-webkit-transition-delay: 0.25s;
			-ms-transition-delay: 0.25s;
			transition-delay: 0.25s;
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			opacity: 1;
			position: relative;
			z-index: 1;
		}

			#header .inner .actions {
				-moz-transition: -moz-transform 1.25s ease;
				-webkit-transition: -webkit-transform 1.25s ease;
				-ms-transition: -ms-transform 1.25s ease;
				transition: transform 1.25s ease;
				-moz-transition-delay: 1s;
				-webkit-transition-delay: 1s;
				-ms-transition-delay: 1s;
				transition-delay: 1s;
				-moz-transform: translateY(0);
				-webkit-transform: translateY(0);
				-ms-transform: translateY(0);
				transform: translateY(0);
				opacity: 1;
			}

		#header:after {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			background-image: linear-gradient(45deg, #4fa49a, #4361c2);
			content: '';
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

	body.is-preload #header .inner {
		-moz-transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
		opacity: 0;
	}

		body.is-preload #header .inner .actions {
			-moz-transform: translateY(30em);
			-webkit-transform: translateY(30em);
			-ms-transform: translateY(30em);
			transform: translateY(30em);
			opacity: 0;
		}

	body.is-preload #header:after {
		opacity: 1;
	}

/* Header_nav */

	#page-wrapper {
		padding-top: 3.5em;
	}

	#header_nav {
		background: rgba(0, 0, 0, 0);
		box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0);
		cursor: default;
		height: 3.5em;
		left: 0;
		line-height: 3.5em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;
	}

		#header_nav h1 {
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			margin: 0;
			position: absolute;
			top: 0;
		}

		#header_nav nav {
			position: absolute;
			right: 1em;
			top: 0;
		}

			#header_nav nav ul {
				margin: 0;
			}

				#header_nav nav ul li {
					display: inline-block;
					margin-left: 1em;
				}

					#header_nav nav ul li a, #header_nav nav ul li span {
						border: 0;
						color: inherit;
						display: inline-block;
						height: inherit;
						line-height: inherit;
						outline: 0;
					}

						#header_nav nav ul li a.button, #header_nav nav ul li span.button {
							height: 2em;
							line-height: 2em;
							padding: 0 1.25em;
						}

						#header_nav nav ul li a:not(.button):before, #header_nav nav ul li span:not(.button):before {
							margin-right: 0.5em;
						}

					#header_nav nav ul li.active > a, #header_nav nav ul li.active > span {
						color: #e44c65;
					}

					#header_nav nav ul li > ul {
						display: none;
					}

	body.landing #page-wrapper {
		padding-top: 0;
	}

	body.landing #header_nav {
		background: transparent;
		box-shadow: none;
		position: absolute;
	}

总而言之，我希望菜单仅位于页面顶部、标题上方，仅此而已。我将衷心感谢您的帮助。我已经尝试了几种方法，但我在网页设计方面仍然没有进行太多尝试，很抱歉。

提前非常感谢您。

最佳答案

在#header_nav的样式中，将position设置为absolute而不是fixed。然后从 main.js 中删除以下内容:

/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header_nav").style.top = "0";
  } else {
    document.getElementById("header_nav").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

这样，当用户向下滚动时，菜单将呈现在标题上方，但不会停留在页面顶部。

编辑:如果您希望菜单呈现在标题上方，而不是顶部，请完全删除 position 行。

关于javascript - HTML - 标题上方的导航菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61280388/

文章推荐： asp.net - 在应用程序中包含 IIS

文章推荐： bash - 从引用列表中替换文件中的字符串

文章推荐： gnuplot - 在 Gnuplot 中关闭科学记数法

文章推荐： lua - 逐字符读取文件到数组

cocoa - 光标位于 sibling 上方
假设有一个具有非常简单的 UI 层次结构的窗口，它只有两个同级: NSTextView 和 NSButton，并且它们确实重叠。我的问题是，为什么光标悬停在按钮上时会有所不同，具体取决于其下方是否有
delphi - 如何将组件放置在 TMainMenu 上方？
例如，当我将 TPanel 添加到表单并使用 alTop 对齐它，然后将 TMainMenu 添加到同一表单时，主菜单位置会覆盖面板位置，以便主菜单保持在窗体的最顶层，面板显示在其下方。是否可以覆盖
layout - 将固定小部件放在 TabBarView 上方
我想构建一个 UI，其中我在屏幕顶部有一些固定的小部件(在所有选项卡上可见)，然后在它们下面我想要一个 TabBarView(底部有选项卡栏)，这是否可能而不使您的自己的标签小部件还是 TabBarV
javascript - 玩家悬停在平台 Sprite 上方
我一直在这里关注 Phaser 3 的介绍 http://phaser.io/tutorials/making-your-first-phaser-3-game并发现我的 Angular 色“悬停”在
iphone - 如何使可视键盘出现在我的 UIToolBar 上方？
我在 View 中间有一个 UITextView，在 View 底部有一个 UIToolBar。当我触摸 UITextView 时，我希望在 UIToolBar 上方出现一个可视键盘。我该怎么做？最
Java - 将标签定位在 GridLayout 上方
我正在尝试制作井字游戏，我有一个 3 x 3 按钮网格，但我想在按钮上方有一个栏，显示分数和玩家姓名，有人可以帮助我吗？到java，不知道从哪里开始。 import javax.swing.*; im
noUiSlider - 将两个工具提示都放在 slider 上方？
是否可以指定 noUiSlider 绘制的工具提示的位置？似乎默认情况下它将第一个放在 slider 上，第二个放在下面。我理解这里的可用性目标，但我想把两者都放在上面或下面。示例(带有上方和下方的
java - 如何将操作栏导航下拉菜单放置在主详细布局中第二个 fragment 上方
我的应用程序中有主详细布局(参见左图): 我为操作栏设置了导航模式列表(使用它来过滤第二个 fragment 中的 ListView ): final ActionBar actionBar = ge
ios - 如何将导航栏或其他东西放在 XLPagerTabStrip 上方
我是 iOS 编程新手，在使用 XLPagerTabStrip(github.com/xmartlabs/XLPagerTabStrip) 时遇到了困难。我按照它的教程，成功在VC的顶部添加了Page
swift - 将图像放置在 map 上方
这个问题适用于任何项目，但在这种情况下，我想将我的图像放置在 map 上方，目前它位于 map 下方。我是 swift 1.2 的新手，所以我不知道如何组合一个示例，任何帮助将不胜感激。最佳答案
javascript - 如何确定元素是否在视口(viewport)上方？
我如何在 javascript 中确定一个元素是否在视口(viewport)上方(用户已经滚动过它)(不仅仅是它是否可见)？在这段代码中: 控制台日志(iselement1aboveviewport
ios - 我的工具栏不会显示在 webView 上方
我正在尝试将工具栏添加到我的 View Controller 。我的 View Controller : -(void)loadView { UIWebView *webView = [[U
ios - 希望将内容固定在视差标题下方的分段 Controller 上方
我知道这是一个一般性问题，但任何方向都会有所帮助。所以我正在使用这个模块 https://github.com/maxep/MXSegmentedPager尝试重新创建 Twitter 的个人资料页
html - 如何将保存按钮放在 div 上方
我需要在保存按钮下放置一个带有 id 的 div。这是 html 代码: save 这是我的 : 通过这种方式，div 隐藏了按钮，我的目的是在 div 上方显示按钮。
ios - 下拉刷新文本放置在 tableview 上方
我试图将我的整个 refreshControl 放在 tableview 后面。我可以通过这样做来放置实际的微调器: self.tableView.addSubview(refreshContro
html - 为什么我的列表项显示在其父
上方？
这在 Safari 和 Firefox 中都会发生。我的导航栏看起来像这样: Test 相关的 CSS 看起来像: li { float: left } a:hover {
css - 为什么框阴影不显示在页脚 div 上方？
我在 CSS 中的 #footermain div 上有一个框阴影，但我无法让它显示在绿色页脚上方。我什么都试过了，还是想不通。 #footermain { background: #1f6c
css - 将图像放在旋转 slider 上方
我试图将图像部分放置在旋转 slider 上方( slider 上侧的一部分应该被图像覆盖)我试过 image{position:relative; z-index:10; } slider{posi
html - 向下滚动时内容显示在固定 div 上方
我认为这是一个简单的问题，但我无法理解它。我在页面顶部有一个固定的 div，当我向下滚动查看内容时，内容(文本)显示在该固定 div 上方 5 像素的边距中。该边距(黑色，请参阅 https://js
jquery - 悬停时显示在 div 上方
我有两个 div，在页脚配置中。目的是在悬停时通过显示隐藏的 div 向上扩展页脚。 #extendedFooter, #test { display: none; } #standardFo

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - HTML - 标题上方的导航菜单