如何将标题固定在wordpress博客上直到下一篇文章?

时间:2014-12-04 16:20:51

标签: javascript php wordpress position blogs

我想让每篇文章的标题和文字保持固定在左侧,而该帖子的图像会滚动。当您到达下一篇文章时,我希望标题返回到第一篇文章的顶部,并且新标题将从新文章开始。

作为一个例子,我在收藏夹部分找到了cargocollective网站:http://cargocollective.com/favorites

这是我已经找到的代码,但我不知道如何将其包含在php循环中     http://jsfiddle.net/Tgm6Y/1447/

以下是我的PHP代码

<div id="content"">
<div class="post">

<div class="textpost">
<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php the_time('m.d.y') ?>  
<?php the_category(', ') ?> 
<?php ob_start();
the_content('Read the full post',true);    
$postOutput = preg_replace('/<img[^>]+./','', ob_get_contents());    
ob_end_clean();    
echo $postOutput;    
?>    
</div>

<div class="imagepost">
<?php
       $beforeEachImage = "<div>";
       $afterEachImage = "</div>";
       preg_match_all("/(<img [^>]*>)/",get_the_content(),$matches,PREG_PATTERN_ORDER);
       for( $i=0; isset($matches[1]) && $i < count($matches[1]); $i++ ) {
             echo $beforeEachImage . $matches[1][$i] . $afterEachImage;
       }
    ?>
</div>
</div>

<?php endwhile; ?>
<?php endif; ?>
</div>

以下是我的javascript:

var windw = this;

$.fn.followTo = function ( elem ) {
var $this = this,
    $window = $(windw),
    $bumper = $(elem),
    bumperPos = $bumper.offset().top,
    thisHeight = $this.outerHeight(),
    setPosition = function(){
        if ($window.scrollTop() > (bumperPos - thisHeight)) {
            $this.css({
                position: 'absolute',
                top: (bumperPos - thisHeight)
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    };
$window.resize(function()
{
    bumperPos = pos.offset().top;
    thisHeight = $this.outerHeight();
    setPosition();
});
$window.scroll(setPosition);
setPosition();
};

$('#textpost').followTo('#textpost');

0 个答案:

没有答案