我想让每篇文章的标题和文字保持固定在左侧,而该帖子的图像会滚动。当您到达下一篇文章时,我希望标题返回到第一篇文章的顶部,并且新标题将从新文章开始。
作为一个例子,我在收藏夹部分找到了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');