我的问题是我的粘性标题在fullpage.js环境中不粘。 我有一个网站,我确实让它工作,但它的工作方式不正确,因为它充满了错误和错误的编码件。
现在问题是我查看固定位置的css部分,还是我的问题在javascript中找到了。
代码:
<script type="text/javascript">
var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 300) {
nav.addClass('fixed-header');
}
else {
nav.removeClass('fixed-header');
}
});</script>
<script type="text/javascript">
$(function(){
$('#topnav ul li a').on('click', function(e){
e.preventDefault();
var scrolldiv = $(this).attr('href');
$(scrolldiv).animatescroll({padding:50});
});
});
</script>
@CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: fixed;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
/*StickyHeaderNavigationMenu*/
header{position:fixed;bottom:0;z-index:99900; width:100%;
}
.fixed{
position: fixed;
bottom:0; left:0;
width: 100%;
z-index:10000; }
.fixed-header {
position:fixed;
top:0px; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background:#36A8B5;
postion:fixed;
z-index:10000;
bottom:0px;
left:0;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:center;
width:100%;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 35px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
<header>
<div class="header">
<nav id="main-navigation">
<ul>
<li><a href="./schools.html">Schools</a></li>
<li><a href="#section1">Gallery</a></li>
<li><a href="#section2">About Us</a></li>
<li><a href="#section3">About Us</a></li>
<li><a href="#section4">Snorkeling</a></li>
<li><a href="#section5">Contact</a></li>
</ul>
</nav>
</div>
</header>
<div id="fullpage">
<div class="section " id="section0">
<div class="layer2"></div>
<div class="layer">
<h1>Fixed elements</h1>
<p>Create your own headers and footers</p>
</div>
<video autoplay loop muted controls id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1"> <h1>We provide the best high level snorkel gear for great value!</h1></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"><h1>Make your own great experience and enjoy New Zealand’s unique underwater Sea Life!</h1></div>
<div class="slide" id="slide4"><h1>After a day on the beach, relax in our Garden Café and Restaurant and recharge your batteries with some awesome food to your liking.
Your adventure starts here!</h1></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide6"><h1>
Not a strong swimmer? – No worries, we offer:<br/>
<ul style:"list-style-type:none">
<li> 5 mm wetsuits – fitted to your needed size</li>
<li> masks, snorkels, weight belts, fins</li>
<li> optical masks available</li>
</div>
<div class="slide" id="slide7"></div>
<div class="slide" id="slide8"></div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Enjoy it</h1>
</div>
</div>
</div>
我添加了其他部分以显示部分中的层次结构并使其可滚动。