固定屏幕div

我在我的网页上有多个帖子。所以它后贴一个帖子...每个帖子都有一个“信息栏”，您可以在其中看到标题，作者，日期等。我希望此栏能够从帖子顶部滚动到底部该职位。固定屏幕div

所以我想我可以使用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/

所以页面上的问题是，需要坚持下来后

来源

2012-02-17 David Bélanger

为什么'$保证金=新的阵列;'？ - >'$ margin = [];'。不知道如果（$ PageOffset> = $ Top && $ PageOffset <=（$ Bot- $ InfoHeight）-10）'和'var $ PageOffset =（$（window）.scrollTop（））+ 40;'mmm。 ..有什么不对。 – elclanrs 2012-02-17 00:06:54

保证金是一个测试，我在里面拿着变数，但后来我决定切换到data-y * ......这是旧代码。我不知道这是什么想法...这是为了下去工作，但是让我们说，我在2后，然后1回到顶部，我希望他坚持到帖子的底部。 – 2012-02-17 00:09:02

找到了解决办法...只好把我的心在别处..在这里，它是：

脚本：

<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>

来源

2012-02-17 03:17:57

-2

在CSS中只使用position: fixed;

来源

2012-02-17 00:31:59 Zungy

固定屏幕div

回答

相关问题