获取固定标题留在容器内部瓦特/ 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'); }  
    }); 
});

答

我并不确切地知道自己想要什么样的疯狂的事，但我不得不作出这样的达成基于代码的页面的底部后跳回上一个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>

获取固定标题留在容器内部瓦特/ jquery

相关推荐