I can't figure out how to make the title change upon scrolling inside the id="titlescroll" div, which surrounds the entire post, and then only outputs the text from the class="title output".
I have styled each post (in this case advanced custom field) within a div with id="titlescroll" and have placed the_title() inside a div with class="titleoutput".
With javascript found at http://jsfiddle.net/Nsubt/ I can make the title change, when I scroll past the class="titleoutput" div, but then I have the problem that it only changes when I scroll past the top of the post where the php code for the_title() sits. This causes problems when I scroll upwards.
I really appreciate any help I can get. Thanks!
PHP code
<?php
$query = new WP_Query( 'category_name=news');
// The Loop
if ( $query->have_posts() ) {
echo '<div class="content-area">';
while ( $query->have_posts() ) {
$query->the_post();
$postid = get_the_ID();
echo '<section class="space" id=';
echo $postid;
echo '>';
echo '</section>';
echo '<div id="titlescroll">';
echo '<div class="titleoutput">';
the_title();
echo '</div>';
$fields = get_fields();
if (get_field('one_column_images')){
echo '<div class="entry-content">';
the_field('one_column_images');
echo '<div class="onetext">';
the_field('one_column_text');
echo '</div>';
echo '</div>';
echo '</div>';
}
Javascript
jQuery(document).ready(function($) {
$(window).on("scroll resize", function(){
var pos=$('#entry-title').offset();
$('#titlescroll').each(function(){
if(pos.top >= $(this).offset().top && pos.top<= $(this).next().offset().top)
{
var $this = $(this);
$('#entry-title').html($this.child('.titleoutput').html()); //or any other way you want to get the date
return; //break the loop
}
});
});
});