Question

我的网页上有多个帖子。所以它贴了一个帖子后发帖...每个帖子都有一个“信息栏”，你可以看到标题，作者，日期等。我希望这个栏跟随帖子顶部的滚动到底部这篇文章。

所以我认为我可以使用jQuery和CSS。这是我到目前为止所得到的，但效果不佳：

$(document).ready(function(){
var $Margin = new Array;

$('.post').each(function(){
                var $Top = $(this).offset().top;
                var $Bot = $Top+$(this).height();

                $(this).attr('data-yTop', $Top);
                $(this).attr('data-yBot', $Bot);
                $(this).attr('data-MarginTop', $(this).css('margin-top'));

                //$Margin[$(this).attr('data-PostID')] = $(this).children('.p-image').html();
            });

            var $PageHeight = $(document).height();

            $(window).scroll(function(){
                var $PageOffset = ($(window).scrollTop())+40;

                $('.p-info').each(function(){
                    var $Top = $(this).parent('.post').attr('data-yTop');
                    var $Bot = $(this).parent('.post').attr('data-yBot');

                    // On coupe un petit peu
                    var $InfoHeight = $(this).height();
                    var $Left = $(this).offset().left;

                    //$(this).parent().children('.p-image').html($Margin[$(this).parent('.post').attr('data-PostID')]+'<br />'+$PageOffset+'<br />Top:'+$Top+'<br />Bot:'+$Bot);

                    if($PageOffset >= $Top && $PageOffset <= ($Bot-$InfoHeight)-10){
                        $(this).css('position', 'fixed');
                        $(this).css('top', '60px');
                        $(this).css('left', $Left+'px');
                    } else {
                        $(this).css('position', '');
                        $(this).css('top', '');
                        $(this).css('left', '');
                    }
                });
            });
        });

这是HTML：

                <div class="post" data-PostID="{{PostID}}" data-yTop="0" data-yBot="0" data-MarginTop="0">

                    <div class="p-image">
                        <!-- Post here (image/text) -->
                        <img src="{{URL}}" alt="" title="" />
                    </div>

                    <div class="p-info">
                        <h2>{{Title}}</h2>
                        <p><a href="/{{PostedBy}}">{{PostedBy}}</a> {{Relative}}</p>
                    </div>

                    <div class="clear"></div>
                </div>

我已经这样做了3天，我累了，我需要帮助。有人能帮帮我吗？

编辑：太复杂了，我在顶部有一个栏，修复。这就是为什么代码中有+40的原因。住在：http://en.dattroll.com/

所以页面上的问题是需要坚持帖子

Answer 1

找到解决方案......不得不把我的想法放在其他地方......这里是：

脚本：

    <script type="text/javascript">
        $(document).ready(function(){
            $('.post').each(function(){
                var $Top = $(this).offset().top;
                var $Bot = $Top+$(this).height();

                $(this).attr('data-yTop', $Top);
                $(this).attr('data-yBot', $Bot);
            });

            var $PageHeight = $(document).height();

            $(window).scroll(function(){
                var $PageOffset = ($(window).scrollTop())+40;

                $('.p-info').each(function(){
                    var $Top = $(this).parent('.post').attr('data-yTop');
                    var $Bot = $(this).parent('.post').attr('data-yBot');

                    var $InfoHeight = $(this).height();
                    var $Left = $(this).offset().left;

                    if($PageOffset >= $Top && $PageOffset <= ($Bot-$InfoHeight)-10){
                        $(this).css('position', 'fixed');
                        $(this).css('top', '60px');
                        $(this).css('left', $Left+'px');
                    } else {
                        if($PageOffset >= $Top){
                            $(this).css('position', 'relative');
                            $(this).css('top', ($(this).parent('.post').height()-$InfoHeight)+'px');
                            $(this).css('left', '');
                            $(this).css('margin-bottom', '0px');
                            $(this).css('padding-bottom', '0px');
                        } else {
                            $(this).css('position', '');
                            $(this).css('top', '');
                            $(this).css('left', '');
                        }
                    }
                });
            });
        });
    </script>

Answer 2

在css中使用position: fixed;

固定屏幕div

2 个答案: