Fade Single Final

by Emily Humphrey

HTML

<div id="navigation"><span></span></div>

<div id="wrapper">
    <div class="post">
        <div class="post-title">Title 5</div>
        <div class="post-content">
            <h1 class="bam"></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec sapien semper, feugiat magna ut, sodales purus. Phasellus sed lectus nec mi condimentum accumsan. Sed tempor, leo vitae placerat dictum, urna sem feugiat sem, at sagittis quam eros sit amet arcu. Etiam ut ante dictum, feugiat velit vitae, semper enim. Praesent tincidunt scelerisque venenatis. Sed at velit iaculis, euismod odio ut, porttitor leo. Duis tincidunt sollicitudin mi. Fusce molestie eros vel vehicula pulvinar. Vivamus consequat risus ut ullamcorper dignissim. Praesent non feugiat enim, sit amet accumsan nulla. Donec vitae enim venenatis, consequat elit quis, ornare dolor. Ut rutrum odio in leo consectetur pharetra.</p>
            
            <p>Sed volutpat odio metus, sit amet posuere sem lobortis eget. Maecenas mollis faucibus consequat. Vestibulum placerat nulla feugiat, convallis sapien id, adipiscing libero. Duis euismod lectus in metus hendrerit, vehicula aliquam urna iaculis. Mauris vulputate ante id auctor interdum. Pellentesque viverra orci semper quam sagittis tempus. Curabitur cursus condimentum tempor. Praesent nec eros lorem. Nulla viverra nisl ac sodales bibendum. Donec quis lobortis dolor. Ut elementum odio imperdiet vulputate elementum. Praesent viverra enim at arcu sollicitudin facilisis.</p>
            
            <p>Pellentesque iaculis ligula nec velit luctus ullamcorper. In hac habitasse platea dictumst. Curabitur et consectetur mauris. Integer vel mauris eleifend, tempor tellus non, condimentum tellus. In ut pharetra nisi. Nam id consectetur orci. Nam quis odio a erat porta pretium. Vivamus imperdiet leo eu venenatis blandit. Fusce vehicula dignissim nibh, ut sodales nunc bibendum id. Nunc accumsan, mi ac gravida semper, risus nulla suscipit risus, ut...

CSS

#wrapper{
    display:block;
    width:940px;
    margin:100px auto;
}
.post{
    display:block;
    width:940px;
    position:relative;
    opacity:.5;
}
.post.seventy{
    opacity:1;
}
.post-title{
    display:block;
    width:900px;
    padding:20px;
    border-bottom: 1px solid #ccc;
}

#navigation{
    display:block;
    height:60px;
    width:100%;
    background:#fbfbfb;
    position:fixed;
    top:0;
    left:0;
    z-index:2;
}

JavaScript

$(window).scroll(function() {
    
    var scroll = $(window).scrollTop();
    
    $(".post").each(function () {
        
        var postTop = $(this).offset().top - 60,
            postBottom = $(this).height() + postTop - 20;
        
        if (scroll >= postTop &&
           scroll <= postBottom) {
            $(this).addClass("seventy");
        } else{
            $(this).removeClass("seventy");
        }
        
        $(this).children(".post-title").css("color", "blue");
        
    });
    
});

$(".post").each(function () {
    
    var postTitle =  $(this).children(".post-title").text();        
    $(this).find(".bam").text(postTitle);
    
});