固定屏幕div

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;