Hi,
If anyone could help me with what should be a fairly easy problem I’d really appreciate it, I’ve basically put together a site for myself using code I’ve found. It’s a vertical scrolling website with 4 div containers, the scrolling is managed by jquery.easing.1.3.js. and jquery.min.js
Everything works perfectly when the side menu is set to scroll with the div containers, but I want to fix it to the browser frame. When I do this the top link becomes inactive?
Below is the code and images, if anyone cares to take a look I’d be eternally grateful!
Thanks
Rob
THE HTML**
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Rob Mullins</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Rob Mullins CV" />
<meta name="keywords" content="design, web, motion, graphic, visualist"/>
<link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
</head>
<style>
/* turned off this to lessen code that's active
a{
color: #0F0;
text-decoration:none;
}
a:hover{
text-decoration: none;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:70px;
font-weight: 300;
}
span.reference a{
color: #CCC;
padding-right:20px;
}
span.reference a:hover{
color: #0F0;
text-decoration:none;
}*/
</style>
<body>
<div class="section black" id="section1">
<h2>rob mullins</h2>
<p>About me here</p>
<ul class="nav">
<li>About</li>
<li><a href="#section2">Design</a></li>
<li><a href="#section3">Web</a></li>
<li><a href="#section4">Motion</a></li>
</ul>
</div>
<div class="section black" id="section2">
<h2>Design</h2>
<p>Design intro here</p>
<ul class="nav">
<li><a href="#section1">About</a></li>
<li>Design</li>
<li><a href="#section3">Web</a></li>
<li><a href="#section4">Motion</a></li>
</ul>
</div>
<div class="section black" id="section3">
<h2>Web</h2>
<p>Web intro here</p>
<ul class="nav">
<li><a href="#section1">About</a></li>
<li><a href="#section2">Design</a></li>
<li>Web</li>
<li><a href="#section4">Motion</a></li>
</ul>
</div>
<div class="section black" id="section4">
<h2>Motion</h2>
<p>Motion intro here</p>
<ul class="nav">
<li><a href="#section1">About</a></li>
<li><a href="#section2">Design</a></li>
<li><a href="#section3">Web</a></li>
<li>Motion</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Monda::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 2500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
</script>
</body>
</html>
THE CSS**
*{
margin:0;
padding:0;
}
body{
background: #FFF;
font-family: Monda;
font-size: 20px;
font-style: normal;
letter-spacing:-1px;
}
.section{
margin:0px;
height:1000px;
width:100%;
float:left;
}
.section h2{
margin:50px 0px 30px 50px;
}
.section p{
margin:20px 0px 0px 50px;
width:900px;
}
.section ul{
list-style:none;
margin:0px 0px 0px 0px;
/* THIS IS WHERE THE PROBLEM SEEMS TO BE - THE ABOUT LINK BECOME INACTIVE ONCE THE MENU IS FIXED IN PLACE? IF POSITION IS CHANGED TO ABSOLUTE THEN THE MENU WORKS OK BUT SCROLLS WITH THE PAGE, WHICH IS NOT WHAT I'M TRYING TO ACHIEVE*/
position:fixed;
}
ul li{
float: none;
padding:auto;
margin:30px 50px;
color: #C3F;
}
ul li a{
display:block;
color: #F00;
}
ul li a:hover{
text-decoration:none;
color: #600;
}
/* turned off this section as its not needed.
#nav ul li{
float:none;
padding:5px;
margin:5px;
color:#aaa;
}
#nav ul li a{
display:block;
color: #CF3;
}
#nav ul li a:hover{
text-decoration:none;
color: #0CF;
}
*/
html #section1 {
background: url(../images/forest.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html #section2 {
background: url(../images/forest2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html #section3 {
background: url(../images/forest3.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html #section4 {
background: url(../images/forest4.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
