我在这里遇到了一个奇怪的问题。我设计了一个粘性导航栏和粘性侧边栏，在页面滚动后粘在顶部。但是我无法弄清楚该部分 div 的标题行为的问题。当达到滚动阈值时，该部分的标题向左移动。它是在导航栏和侧边栏固定在顶部的同时发生的。为什么该死的标题不在左侧，因为它应该处于正常状态？ 请帮帮我。
我在添加代码片段时遇到问题，所以我将所有代码粘贴到这里。
HTML
<!DOCTYPE html>
<html>
<head><title>home</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="java/script.js"></script>
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div class="header">
<img class="header" src="images/top.jpg" alt="journal of advance science & environment" />
</div>
<nav class="nv" id="respNav">
<a class="resp" href="#">Home</a>
<a class="resp" href="#">Aims and Scope</a>
<a class="resp" href="#">Editorial Board</a>
<a class="resp" href="#">Author's guidelines</a>
<a class="resp" href="#">Contact us</a>
<a id="icon" href="#">Menu</a>
</nav>
<div class="sidebar">
<h2 class="sidebar">Quick Links</h2>
<ul class="sidebar">
<li>dummy grgree </li>
<li>dummyummy </li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummyssfs</li>
<li>dummysfsf</li>
<li>dummysfsf</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummysfsf</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummyddwe</li>
<li>dummy</li>
<li>dummy</li>
<li>dummyzzzz</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy33333</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy third last</li>
<li>dummy sec last</li>
<li>dummy last</li>
</ul>
</div>
<div class="section">
<h1>heading</h1>
</div>
<!-- <script>
function myFunction() {
var x = document.getElementById("respNav");
if (x.className === "nv") {
x.className += " responsive";
} else {
x.className = "nv";
}
}
</script>-->
</body>
</html>
CSS
*{box-sizing:border-box}
body{margin:0}
/*=================================================================
HEADER
===================================================================*/
div.header{margin:0;
padding:0;
max-width:100%;
height:auto;
background-color:black;
}
img.header{width:100%;
display:block;
}
nav.fixed{position:fixed;
top:0;width:100%;
z-index:10
}
nav{background-color:#e3a836;
border-bottom:2px solid #00384d;
border-top:2px solid #00384d;
z-index:10
}
nav a{display:inline-block;
text-decoration:none;
color:white;
font-size:20px;
font-family: calibri;
padding:15px 25px;
letter-spacing:2px;
margin:0;
margin-right:-4px;
transition-duration: 0.4s;
}
nav.nv a#icon{display:none;}
nav a:hover{background-color:#00384d;
}
div.sidebar{
width:200px;
float:left;
height:650px;
background:#00384d;
padding:5px;
overflow-y:scroll;
}
h2.sidebar{
padding:0 20px;
margin-left:-4px;
margin-right:-4px;
background:#e3a836;
}
ul.sidebar{list-style-type:none;
padding:0 0 0 0;
margin:0 0 50px 0;
}
ul.sidebar li{margin:5px -4px 5px -4px;
font-size:18px;
padding:0 5px 0 10px;
color:white;
}
ul.sidebar li:nth-child(odd){background:#004761}
div.sidebarFixed{
position:fixed;
top:48px;
}
div.section{width:65%;
position:relative;
left:300px;
top:50px;
height:2000px;
background:#f2f2f2;
}
/*=====================================================
MEDIA SCREEN
===============*/
@media only screen and (max-width: 800px){
nav.nv {width:100%;z-index:10;border-top:2px solid red;border- bottom:2px solid green;}
nav.nv a.resp{display: none;}
nav.nv a#icon{display:inline-block;
width:100%;
}
nav.nv.responsive a{display:block;}
}
JavaScript
jQuery(document).ready(function(){
var navOffset=jQuery("nav").offset().top;
jQuery("nav").wrap('<div class="placeholder" ></div>');
jQuery("div.placeholder").height(jQuery("nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos=jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
jQuery(".sidebar").addClass("sidebarFixed");
}else{
jQuery("nav").removeClass("fixed");
jQuery(".sidebar").removeClass("sidebarFixed");
}
});
})
最佳答案
您的问题是您对 div.sidebarFixed 类使用了不必要的 position: fixed; 样式。删除该样式，标题保留在原位。
https://jsfiddle.net/DTcHh/25312/
试试用这个代替:
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="java/script.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div class="header">
<img class="header" src="images/top.jpg" alt="journal of advance science & environment" />
</div>
<nav class="nv" id="respNav">
<a class="resp" href="#">Home</a>
<a class="resp" href="#">Aims and Scope</a>
<a class="resp" href="#">Editorial Board</a>
<a class="resp" href="#">Author's guidelines</a>
<a class="resp" href="#">Contact us</a>
<a id="icon" href="#">Menu</a>
</nav>
<div class="sidebar">
<h2 class="sidebar">Quick Links</h2>
<ul class="sidebar">
<li>dummy grgree </li>
<li>dummyummy </li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummyssfs</li>
<li>dummysfsf</li>
<li>dummysfsf</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummysfsf</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummyddwe</li>
<li>dummy</li>
<li>dummy</li>
<li>dummyzzzz</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy33333</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy</li>
<li>dummy third last</li>
<li>dummy sec last</li>
<li>dummy last</li>
</ul>
</div>
<div class="section">
<h1>heading</h1>
</div>
<!-- <script>
function myFunction() {
var x = document.getElementById("respNav");
if (x.className === "nv") {
x.className += " responsive";
} else {
x.className = "nv";
}
}
</script>-->
</body>
</html>
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery("nav").wrap('<div class="placeholder" ></div>');
jQuery("div.placeholder").height(jQuery("nav").outerHeight());
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
jQuery(".sidebar").addClass("sidebarFixed");
} else {
jQuery("nav").removeClass("fixed");
jQuery(".sidebar").removeClass("sidebarFixed");
}
});
})
* {
box-sizing: border-box
}
body {
margin: 0
}
/*=================================================================
HEADER
===================================================================*/
div.header {
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
background-color: black;
}
img.header {
width: 100%;
display: block;
}
nav.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 10
}
nav {
background-color: #e3a836;
border-bottom: 2px solid #00384d;
border-top: 2px solid #00384d;
z-index: 10
}
nav a {
display: inline-block;
text-decoration: none;
color: white;
font-size: 20px;
font-family: calibri;
padding: 15px 25px;
letter-spacing: 2px;
margin: 0;
margin-right: -4px;
transition-duration: 0.4s;
}
nav.nv a#icon {
display: none;
}
nav a:hover {
background-color: #00384d;
}
div.sidebar {
width: 200px;
float: left;
height: 650px;
background: #00384d;
padding: 5px;
overflow-y: scroll;
}
h2.sidebar {
padding: 0 20px;
margin-left: -4px;
margin-right: -4px;
background: #e3a836;
}
ul.sidebar {
list-style-type: none;
padding: 0 0 0 0;
margin: 0 0 50px 0;
}
ul.sidebar li {
margin: 5px -4px 5px -4px;
font-size: 18px;
padding: 0 5px 0 10px;
color: white;
}
ul.sidebar li:nth-child(odd) {
background: #004761
}
div.sidebarFixed {
top: 48px;
}
div.section {
width: 65%;
position: relative;
left: 300px;
top: 50px;
height: 2000px;
background: #f2f2f2;
}
/*=====================================================
MEDIA SCREEN
===============*/
@media only screen and (max-width: 800px) {
nav.nv {
width: 100%;
z-index: 10;
border-top: 2px solid red;
border- bottom: 2px solid green;
}
nav.nv a.resp {
display: none;
}
nav.nv a#icon {
display: inline-block;
width: 100%;
}
nav.nv.responsive a {
display: block;
}
}
关于javascript - 为什么滚动后导航栏变得粘滞时，部分 div 的标题向左移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39624388/