Bit of a complicated question here. I'm creating a scrolling interactive and having a hard time with waypoints making different elements sticky. Everything is on one page but I want things to stick at different places as you scroll. I'll paste my code in and then explain what I want it to do.
HTML
<body>
<div class="wrap">
<h1 id="title">DARK SKIES</h1>
<h2><em>What we lose when they disappear</em></h2>
<div class="introparagraph">
<p>Intro paragraph part 1</p>
<p>Intro paragraph part 2</p>
</div>
<div id="blank"></div>
<div class="bortlescale">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="bortle-explanation">
Bortle scale explanation
</div>
<div id="blank"></div>
<div id="Classes">
<h1>Class 1: Excellent Dark-Sky Site</h1>
<div id="Class-Wrap">
<div>
Class 1 explanation
</div>
<div id="Class1">
Zodiacal Light
</div>
<div id="Class1">
Gegenschein
</div>
<div id="Class1">
Airglow
</div>
<div id="Class1">
The Triangulum Galaxy
</div>
</div>
CSS
.wrap{
margin:0 auto;
vertical-align: center;
}
#title{
font-family: "bebasregular", sans-serif;
text-align: center;
font-size: 300px;
vertical-align: center;
color:white;
margin-bottom: -50px;
top: 2px;
}
h2{
font-family: "sinanova-regularregular", serif;
text-align: center;
font-size: 100px;
vertical-align: center;
color: white;
}
p{
font-family:serif;
font-size: 30px;
text-align: center;
position:relative;
vertical-align: center;
color:white;
}
.bortlescale{
margin: 5px;
}
.bortlescale div{
border:1px solid white;
margin: 60px;
margin-right:0px;
padding:10px;
width: 45px;
text-align: center;
border-radius: 100px;
color:white;
font-family: "Museo300Regular";
font-size: 35px;
}
.introparagraph{
text-align: center;
margin:auto;
width:1500px;
font-size: 40px;
}
.introparagraph p{
font-family:"sinanova-regularregular";
font-size: 40px;
}
.bortle-explanation{
font-family: "sinanova-regularregular",serif;
font-size: 35px;
width:1000px;
padding:40px;
border-radius: 10px;
float:left;
margin-left: 200px;
margin-top: 500px;
margin-bottom:500px;
position: relative;
background-color:rgba(0,0,0,0.4);
color:white;
}
h1{
font-family: "sinanova-regularregular", sans-serif;
font-size: 100px;
text-align: center;
color:white;
margin-bottom: 10px;
}
#Classes div{
font-family: "sinanova-regularregular";
color:white;
font-size: 40px;
}
#Class-Wrap{
width:1500px;
text-align: center;
/*position: absolute;*/
margin-left: 27%;
}
#Class1{
/*position: fixed;*/
font-family: serif;
font-size: 20px;
padding:40px;
background-color:rgba(0,0,0,0.4);
border-radius: 10px;
float:left;
margin-left: 50px;
margin-right:500px;
margin-top: 500px;
width: 1000px;
}
#blank{
height: 1500px;
}
Javascript with a sad attempt at waypoints, plus script for an effect that highlights each number on the scale as the user scrolls to the corresponding page:
$(document).ready(function(){
console.log("hello");
$('#title').fadeIn('slow');
});
$(window).scroll(function(){
$('bortlescale').waypoint('sticky', {stuckClass: 'scaleStuck'});
});
var $scales = $('.bortlescale div'),
$explanations = $('#Class-Wrap div'),
winH = $(window).height(),
topSpacing = 500;
$explanations.height(winH);
$(window).scroll(function(){
var st = $(this).scrollTop();
$explanations.each(function(index){
var offset = $(this).offset(),
h = $(this).height();
if(st >= offset.top - topSpacing && st < offset.top + h - topSpacing){
$scales.eq(index).css({'background':'red'});
}else{
$scales.eq(index).css({'background':'none'});
}
});
});
Here's what I want it to do: I want #title and h2 to fade in when the document loads, and to fade away once the user scrolls past the first section. Then I want .bortlescale (shows up as a vertical row of white numbers in white circles with no fill) to scroll in to the new page from the bottom and stick right in the middle of the left margin of the page (so where it is now margin-wise, then just centered vertically). I want it to stay there for the rest of the time (there are 8 other sections like #Class1 that I didn't include for space purposes, which each show up as the user scrolls down). As the user scrolls to each section, the corresponding number on the scale will highlight. You can also click a number and be whooshed to the corresponding section explanation.
With the js as it is right now, none of that is happening, not even the fade-ins at the beginning which I thought would be pretty simple. I'm thinking it has something to do with how everything is positioned in relation to each other, but I'm pretty lost right now. Can someone help explain how to do this or at least tell me any problems in my code that could explain some of these issues? Thank you!