I have made divs on my website fade in when the page loads but i am trying to alter a few to fade in as the user scrolls to them. I have animated the divs using css which i am comfortable with and have tried to code jQuery to make this happen but it doesn't seem to be working?
To start with i'd be looking at making the div class about-header fade in when the user scrolls to it.
HTML
<div class="about-container">
<a id="about"name="about"></a>
<ul class="about-image">
<li>
<div class="image"></div>
<div class="overlay"><div class="bt1">Dan Morris</div><div class="bt2">Followers</div><div class="bt3">19.2K</div></div>
</li>
</ul>
<div class="about-header">HEY! I'M DAN, A FREELANCE <span style="color:#0171bd";>MULTIMEDIA JOURNALIST</span> BASED IN BRISTOL </div>
<div class="about-biography"><span class="text">Dan is a journalism graduate with an upper-class Batchelor of Arts (BA Hons) degree from the University of Chester. At 25 years old, Dan is an avid football fan and racing enthusiast. This is my online portfolio, where you will be able to find out more about me and explore my work.</span></div>
<div class="about-detail">
<div class="about-me">
<div class="about-me-image"></div>
<div class="about-me-header">
<h3>ABOUT ME</h3>
</div>
<div class="about-me-copy"><span class="text">Dan is a journalism graduate from the University of Chester. At 26, Dan is an avid football fan and racing enthusiast, bedroom DJ and radio fanatic.</span></div>
</div>
<div class="about-what-i-do">
<div class="about-what-i-do-image"></div>
<div class="about-what-i-do-header">
<h3>WHAT I DO</h3>
</div>
<div class="about-what-i-do-copy"><span class="text">Dan is no stranger to big stories and big interviews. He has covered a host of topics and interviewed some of the biggest names in showbiz .</span></div>
</div>
<div class="about-connect">
<div class="about-contact-image"></div>
<div class="about-contact-header">
<h3>CONTACT ME</h3>
</div>
<div class="about-contact-copy"><span class="text">Interested in working with Dan, then please do not hesitate to get in contact. Whether it's by phone, email or social media, he'll be sure to get back to you.</span></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
CSS
.about-container {
height: auto;
width: 100%;
float: left;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.about-header {
height: auto;
width: 100%;
margin-top: 20px;
text-align: center;
font-size: 30px;
font-weight: 400;
color: #707070;
font-family: 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
line-height: 1.3;
}
.about-biography {
height: auto;
width: 40%;
margin-top: 20px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.about-profile-image {
height: 252px;
width: 252px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background-image: url(../images/danmorris_profile.png);
}
.about-details {
height: auto;
width: auto;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.about-me {
height: auto;
width: 33%;
margin-top: 20px;
float: left;
margin-bottom: 40px;
}
.about-what-i-do {
height: auto;
width: 33%;
margin-top: 20px;
float: left;
margin-bottom: 40px;
}
.about-connect {
height: auto;
width: 33%;
margin-top: 20px;
float: left;
}
.about-me-image {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/about_icon.png);
background-repeat: no-repeat;
}
.about-me-header {
height: 20px;
width: 50%;
margin-top: 20px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}
.about-me-copy {
height: auto;
width: 60%;
margin-top: 10px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.about-what-i-do-image {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/work_icon.png);
background-repeat: no-repeat;
}
.about-what-i-do-header {
height: 20px;
width: 50%;
margin-top: 20px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}
.about-what-i-do-copy {
height: auto;
width: 60%;
margin-top: 10px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.about-contact-image {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
background-image: url(../images/conact_icon.png);
background-repeat: no-repeat;
}
.about-contact-header {
height: 20px;
width: 50%;
margin-top: 20px;
text-transform: capitalize;
text-align: center;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
}
.about-contact-copy {
height: auto;
width: 60%;
margin-top: 10px;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.about-detail {
width: 80%;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
height: auto;
margin-bottom: 20px;
}
FADE ANIMATION
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation: fadeIn 1s ease-in .5s both;
animation: fadeIn .1s ease-in .5s both;
}
JQUERY
$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("..about-header").height();
var viewPortSize = $(window).height();
var triggerAt = 150;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;
if ($(window).scrollTop() >= triggerHeight) {
$('.fadein').css('visibility', 'visible').hide().fadeIn();
$(this).off('scroll');
}
});
