【发布时间】：2016-09-22 03:21:14
【问题描述】：
我在这里遇到了奇怪的问题。我设计了一个粘性导航栏和粘性侧边栏，在页面滚动后会粘在顶部。但我无法找出部分 div 标题行为的问题。当滚动阈值达到该部分的标题向左移动。它发生在导航栏和侧边栏固定在顶部的同时。为什么地狱标题不在左侧，因为它应该处于正常状态？ 请帮帮我。
我在添加代码 sn-p 时遇到问题，所以我将所有代码粘贴到这里。
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");
}
});
})
【问题讨论】：
标签： javascript jquery html css