导航栏立即跳到顶部
[英]Navigation Bar Jumps to the Top Immediately
问题描述
Edit: I apologize, it seems it was an issue with offline hosting the website. 
编辑：很抱歉，离线托管网站似乎是一个问题。 After transferring everything over to the domain the problem I had is no longer an issue. 将所有内容转移到域后，我遇到的问题不再是问题。 Though it does bring up the question as to why it would load incorrectly via the same browser by keeping all the files in a folder on the desktop vs having it run through a host. 尽管它确实提出了一个问题，为什么它会将所有文件都保存在桌面上的某个文件夹中，而不是通过主机运行，从而导致它无法通过同一浏览器正确加载。
I have a rather strange issue with a website I'm trying to develop. 我要开发的网站存在一个非常奇怪的问题。 Anytime I make a single change to the page, and about 75% of the time when trying to load it normally the navigation bar bugs out. 每当我对页面进行一次更改时，大约75％的时间在尝试正常加载页面时，导航栏就会出错。 Unless you hit the "maximize window" button twice on the browser, the nav-bar no longer retains it's intended positioning and jumps to top immediately on scroll. 除非您在浏览器上单击两次“最大化窗口”按钮，否则导航栏将不再保留其预期的位置，并且会在滚动时立即跳到顶部。 Anytime you attempt it after the maximize window button has been pressed twice, it works without a hitch. 两次按下最大化窗口按钮后，只要您尝试尝试，它都不会出现故障。 Here is my current HTML, CSS, and JS. 这是我当前的HTML，CSS和JS。 Feel free to ignore the sarcasm in my note tags, and the fact that the page is mostly incomplete. 随意忽略我的便签标签中的讽刺，以及页面大部分不完整的事实。 I'm just trying to fix some issues before pressing on. 我只是想在继续之前解决一些问题。
HTML: HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="style.css">
<script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. -->
<div class="status"></div>
<div class="container"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->
<center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>
<!-- The navigation portion... dear God... here is where it all usually goes wrong. -->
<nav>
<ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. -->
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... -->
<br/><br/>
<h2>TEXT TEST FOR TESTING TEXT</h2> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
<p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
</div>
CSS: CSS：
html {
padding: 0;
margin: 0;
background-color: #000;
}
body {
font-family: Helvetica, sans-serif;
font-size: 93%;
line-height: 1.5em;
padding: 40px 0;
margin: 0;
}
a,
a:link,
a:visited {
color: blue;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0;}
p {margin: 0 0 1em 0;}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
h1 {
background-color: #305782;
color: #FFF;
padding: 60px 25px;
margin: 0;
}
nav {
z-index: 500;
background-color: #e7ecf2;
}
.nav-placeholder {
margin: 0 0 40px 0;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #000;
}
.fixed .nav-inner {
padding: 0 20px;
}
.fixed .nav-inner-most {
max-width: 100%;
margin: 0 auto;
background-color: #e7ecf2;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
}
nav ul li a:link,
nav ul li a:visited {
display: block;
text-decoration: none;
padding: 10px 25px;
background-color: #000;
border: 2px solid #7d0000;
color: #7d0000;
font-size: 90%;
font-weight: bold;
}
nav ul li a:hover {
background-color: #28bfa1;
color: #FFF
}
/* This seems to have an undesired effect, but may be necessary for later.
The border-right: none; attribute is especially annoying...
nav ul li:last-child a:link,
nav ul li:last-child a:visited {
border-right: none;
}
*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JS: JS：
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
Thank you in advance, 先感谢您，
Shadowfang 影牙
1 个解决方案
解决方案1
0 2017-01-29 20:57:26
You haven't yet specified your target link, inside the href. 您尚未在href内指定目标链接。
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
The '#' symbol in href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. href =“＃”中的'＃'符号未指定ID名称，但具有相应的位置-页面顶部。 Clicking an anchor with href="#" will move the scroll position to the top. 单击带有href =“＃”的锚点会将滚动位置移到顶部。
This is why it jumps to top immediately. 这就是为什么它立即跳到顶部的原因。 You will have to specify where you want the links to lead the user. 您将必须指定要将链接引导到用户的位置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
从导航栏中选择特定页面后，侧导航栏跳转到顶部 - Side Navigation bar jumps to top after selecting specific page from Navigation bar
粘性导航在响应性方面跃居首位 - Sticky Navigation Jumps to Top on Responsive
滚动到顶部时，Footer Div（导航）会跳转 - Footer Div (navigation) jumps when scrolling to top
导航栏位于顶部 - Navigation bar that stays on top
顶部导航栏调整大小 - Top Navigation Bar resizing
粘性导航栏可滚动滚动（JS，HTML，CSS） - Sticky Navigation Bar Jumps on Scroll (JS, HTML, CSS)
单击隐藏链接时滚动条跳回到顶部 - Scroll bar jumps back to the top when the hide link is clicked
JS /淘汰赛无限滚动-滚动条跳至页面顶部 - JS/Knockout Endless Scrolling - Scroll Bar Jumps To Top of Page
垂直导航栏移至顶部 - A Vertical Navigation Bar Moving to The Top
Bootstrap 3固定顶部导航栏 - Bootstrap 3 Fixed Top Navigation Bar
相关标签