獲取固定標題留在容器內部瓦特/ jquery

我想獲得一個div來獲取固定位置，當它的父母進入窗口的頂部，並失去它，當它擊中底部......出於某種原因，我可以讓它獲得固定的位置，但不會失去它。在這一段時間，我只是無法弄清楚它...獲取固定標題留在容器內部瓦特/ jquery

這是我的代碼到目前爲止。任何人都可以看到我失蹤或搞砸了嗎？

$(window).bind('scroll',function(event) { 
    $('.posthead').each(function(e) { 
     var y = $(window).scrollTop(); 
     var windowHeightS = $('body').height(); 

     var postheadh = $(this).height() + 30; 
     var top = $(this).offset().top - parseFloat($(this).css('margin-top').replace('auto', 0)); 

     var postheight = $(this).parent('.type-post').height(); 
     var windowHeight = windowHeightS - top; 

     //var top = getposition.top; 

     var postTop = top - y; 
     var postBottom = postheight + top - y; 


     $(this).parent('.type-post').children('.debug').html('Position from top: <span>' + y + "</span> bottom: <span>" + postBottom + "</span>"); 


     if(postTop <= 0) { $(this).addClass('fixed'); } 
     else if(postTop >= 0) { $(this).removeClass('fixed'); } 

     if(postBottom <= 0) { $(this).removeClass('fixed'); }  
    }); 
});

來源

2011-04-18 Chris Ensell

我並不確切地知道自己想要什麼樣的瘋狂的事，但我不得不作出這樣的達成基於代碼的頁面的底部後跳回上一個div。希望這正是你想要達到的目標。

我已經評論了你的代碼，所以你可能也會爲自己弄清楚這個問題。

這是我創建的測試頁面。我也有一些顏色編碼的東西，使事情更容易理解。

http://www.ferociouscoder.com/test.html

 
<style type="text/css"> 
html { 
    background-color:#FFF; 
    height:100%; 
} 
body { 
    background-color:#CCC; 
    height:1600px; 
} 
.posthead { 
    background-color:#0FF; 
    margin-top:auto; 
} 
.type-post { 
    background-color:#FF0; 
    height:500px; 
} 
.fixed { 
    position:fixed; 
    color:#F00; 
} 
</style> 

<script> 
$(window).bind('scroll',function(event) { 
    $('.posthead').each(function(e) { 
     var y = $(window).scrollTop(); //How much has the scrollbar on the right moved from the top. Depends on size of scrollbar. 
     var windowHeightS = $('body').height(); //600px; 

     var postheadh = $(this).height() + 30; //postheadh = height of CHILD DIV + 30 (I don't know why this is so but ok) 
     var top = $(this).offset().top;// - parseFloat($(this).css('margin-top').replace('auto', 0)); //How far is the child div away from the top of the page. 


     var postheight = $(this).parent('.type-post').height(); //Height of the parent div 
     var windowHeight = windowHeightS - top; //How far away is the top of the parent div from the botom of the body tag 

     //var top = getposition.top; 

     var postTop = top - y; //Since the position of the parent div is fixed. This never changes. It will be the value of the top margin of the body tag. 
     var postBottom = postheight + top - y; //Since the position of the parent div is fixed. This also never changes. It will be the value of the height of the parent div + the constant above. 

     $(this).parent('.type-post').children('.debug').html('Position from top: ' + y + " bottom: " + (windowHeightS-postheight) + ""); 

     if(y >= 0) { $(this).parent().addClass('fixed');} //postTop never changes! What you need is y I presume. Also you want it to stay fixed until it reaches the bottom. 

     //else if(y >= 0) { $(this).removeClass('fixed'); } I commented this because it removed fixed positioning as soon as you're not at teh top of the screen. When it gets to the bottom it tries to remove class fixed again (But you've already done so!) 

     if(y >= (windowHeightS - postheight)) { $(this).parent().removeClass('fixed');}//postBottom never changes! what you need to see is if you've scrolled more than (or equal) the height of the parent container 
    }); 
}); 
</script> 
</head> 
<body> 
    <div class="type-post"><br> 
     PARENT DIV 'TYPE-POST'<br> 
     <div class="posthead debug"> 
      CHILD DIV 'POSTHEAD'<br> 
     </div> 
    </div> 
</body> 
</html>

來源

2011-04-18 18:14:34 Sanchit

獲取固定標題留在容器內部瓦特/ jquery

回答

相關問題