浮动导航栏停止固定在页面顶部 [英] Floating nav bar that stops fixed to the top of the page
问题描述
我试图模仿我在几次不同时间看到过的东西。通常有一个带有导航栏的横幅，当页面滚动时，它会移动直到它接触到顶部然后停止并保持固定。我不完全确定如何做到这一点。我看到了一些不起作用的不同东西。
I am trying to mimic something that I have seen a few different times. There is usually a banner with a nav bar below and when the page is scrolled it moves until it touches the top then stops and stays fixed. I am not completely sure how to accomplish this. I have seen a few different things that just dont work.
环顾四周后，我发现它会起到这样的作用，但我似乎可以让它起作用。我想我错过了一些东西
After looking around I figured out it will work something like this but I can seem to get it to work. I think I am missing some stuff
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Table_01 {
position:relative;
left:0px;
top:0px;
width:1020px;
height:854px;
text-align: left;
margin-right: auto;
margin-left: auto;
}
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #a4c639;
text-align: center;
margin: 0px;
}
-->
</style>
<script type='text/javascript'>
var topPos = 120;
var updatedPos;
window.onscroll = navPos;
if (!topPos) {
topPos = 120;
}
function navPos() {
var pos = window.scrollY;
if (!topPos) {
topPos = 120;
}
var st = document.getElementById('navTest');
if (st) {
if (pos < topPos && updatedPos != 'absolute') {
st.style.position = 'absolute';
st.style.top = topPos + 'px';
updatedPos = 'absolute';
//alert('Switched to absolute');
} else if (pos >= topPos && updatedPos != 'fixed') {
st.style.position = 'fixed';
st.style.top = '0';
updatedPos = 'fixed';
//alert('Switched to fixed');
}
}
}
navPos();
</script>
</head>
<body>
<div id="Table_01">
<div id='navTest' style='position:absolute;z-index:999;top:120px;left:0; height:50px;width:100%; background-color:#000;' width='100%'>
</div>
</div>
</body>
</html>
推荐答案
所有对不存在的<$ c $的引用c> navTopPos 变量应该更改为引用 topPos 变量。您的JS代码现在应该是：
All references to a non-existant navTopPos variable should be changed to reference the topPos variable. Your JS code should now be:
var topPos;
var updatedPos;
window.onscroll = navPos;
if (!topPos) {
topPos = 120;
}
function navPos() {
var pos = window.scrollY;
if (!topPos) {//this line was changed
topPos = 120;//this line was changed
}
var st = document.getElementById('navTest');
if (st) {
if (pos < topPos && updatedPos != 'absolute') {
st.style.position = 'absolute';
st.style.top = topPos + 'px';//this line was changed
updatedPos = 'absolute';
//alert('Switched to absolute');
} else if (pos >= topPos && updatedPos != 'fixed') {
st.style.position = 'fixed';
st.style.top = '0';
updatedPos = 'fixed';
//alert('Switched to fixed');
}
}
}
navPos();
口译员在这里死了：
if (!topNavPos) {
topNavPos = 120;
}
更新了JSFiddle 并进行了必要的更改。
Updated JSFiddle with the necessary changes.
这篇关于浮动导航栏停止固定在页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
