当页面滚动时淡入div

当页面加载时，我已经使网站上的div淡入，但是随着用户滚动到页面上，我试图更改一些淡入淡出。我已经使用自己喜欢的CSS为div设置了动画，并尝试编写jQuery来实现此目的，但是它似乎没有用？

首先，我要考虑的是当用户滚动到div类时，关于标题的淡入淡出。

的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;
}

淡入淡出动画

@-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');
}
});