fullpage.js粘性标题赢了

时间:2015-04-08 19:04:37

标签: javascript jquery html css fullpage.js

我的问题是我的粘性标题在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>

我添加了其他部分以显示部分中的层次结构并使其可滚动。

0 个答案:

没有答案