I'm currently working on implementing some unique features with JavaScript and CSS that I'm having trouble figuring out. Here's the progress I've made so far: http://codepen.io/melissall/pen/PPWPQE
One of my goals is to center the headline within the image until the text starts scrolling up.
I have a CSS transition in place that changes the color of the text, but I want it to be based on the position of the headline rather than time-based. To see an example of what I mean, check out how the logo changes color on this site:
I've tried searching for solutions online, but I haven't been able to find anything useful. If anyone could provide some guidance, I would greatly appreciate it.
Here's the code snippet:
HTML
<div id="image"></div>
<div id="container" class="row">
<div id="heading" class="large-12">
<h2>Heading lorem ipsum sit dolor</h2>
</div>
<div id="content" class="large-12">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi ante, pulvinar a lorem id, pellentesque facilisis diam. Cras placerat libero ut urna auctor faucibus. Morbi facilisis diam et massa facilisis, vel vulputate ex malesuada. Fusce varius, ex id vulputate accumsan, arcu orci scelerisque purus, et tempor orci leo et nisi. Aliquam aliquet massa vel nibh dictum viverra. Mauris dapibus quam ut magna congue porttitor. Aenean suscipit tortor a urna dapibus dignissim. In ornare risus et mauris pellentesque pharetra. Nunc et ultrices erat. Maecenas interdum dignissim turpis, in porta erat. Donec tortor urna, finibus ut quam ac, aliquam ullamcorper arcu. Vivamus id est quis ante volutpat laoreet. Proin fringilla pharetra est a sagittis. Fusce non magna mauris. Proin iaculis aliquet mi, a pellentesque dui porttitor ac. </p>
</div>
</div>
CSS
h2{
color: #ffffff;
font-size: 4em;
font-weight: 700;
font-family: 'Roboto Condensed', sans-serif;
}
#image {
background: url(http://7-themes.com/data_images/out/78/7039061-beautiful-tropical-beach-wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 500px;
}
#heading{
position: relative;
top: -250px;
text-transform: uppercase;
color: #fff;
}
#heading h2{
color: #fff;
padding-top: 20px;
}
#...
JS
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function (e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#heading').followTo(490);
$(window).scroll(function() {
var addRemClass = $(window).scrollTop() > 470 ? 'addClass' : 'removeClass';
$("#heading h2")[addRemClass]('bgChange');
});
EDIT #1:
I managed to make some progress using just CSS, but encountered new issues. You can view the updated link here: http://codepen.io/melissall/pen/pjRZdx
New Issue #1: The headline no longer stays above the text content. I had to remove the existing JS as it was causing conflicts with the positioning of the headline.
New Issue #2: If you scroll down far enough, the white text that was overlaying the image reappears.
EDIT #2: I was able to resolve the issues (at least on CodePen) by adding additional JS code that detects when a specific point on the page is reached and adjusts the positions of the heading and content accordingly. The code may not be perfect, but it meets the basic functionality requirements I set out to achieve. Here's the final version of the code for reference: http://codepen.io/melissall/pen/pjRZdx