On a wordpress blog I would like the post title to sit fixed in the bottom and change when I scroll to the next post

0
votes

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

    }
});
});
});
1
javascriptjquerywordpressscroll

1 Answers

0
votes

Problem solved. I tried a million things and one of them worked. Hurrah!

Javascript

jQuery(document).ready(function($) {
$(window).on("scroll resize", function(){
var pos=$('#entry-title').offset();
$('.titleoutput').each(function(){
    var box = $('#titlescroll').offset();
    if(pos.top >= $(this).offset().top && box.top <= $(this).next().offset().top)
    {
        $('#entry-title').html($(this).html());
        return; //break the loop
    }

});
});
});