Исправлено inscreen 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;