jQuery获得边缘需要将元素放在屏幕上方

我在IE6和FF中遇到了一些问题，我试图在jQuery中实现它。基本上，页面顶部有一个使用浮动内容的对象，这似乎干扰了$（window）.scrollTop（）属性。 $（window）.scrollTop（）会返回滚动隐藏的空格，这是我的理解（如果我错了，请告诉我正确的方式来帮助我！）。我做了一些没有浮动内容的测试，他们似乎支持这一点。jQuery获得边缘需要将元素放在屏幕上方

这是我的代码：

$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 180) { //is the window scrolled enough to hide the header? 
      var $myDiv = $("#scrollingDiv"); 
      if ($myDiv.is(":hidden")) { //if mydiv is currently hidden, show it 
       $myDiv.show(); 
      } 
      $myDiv.stop(); 
      $myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); //move mydiv to the top edge of the page... OR SO I THOUGHT! 
     } 
     else { //otherwise hide it, since the header is visible 
      $("#scrollingDiv").hide(); 
     } 
    }); 
});

这是HTML文件，显示错误（你只是注释掉“evilFloatomoton”的div来看看它正常工作）

<HTML> 
<HEAD> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > 180) { 
      var $myDiv = $("#scrollingDiv"); 
      if ($myDiv.is(":hidden")) { 
       $myDiv.show(); 
          } 
      $myDiv.stop(); 
      $myDiv.animate({ marginTop: ($(window).scrollTop()) + "px" }, "fast", function() { /*animation complete*/ }); 
     } 
     else { 
      $("#scrollingDiv").hide(); 
     } 
    }); 
}); 
</script> 
<style type="text/css"> 
<!-- Enter any CSS to make objects viewable here --> 
#scrollingDiv 
{ 
    width: 100%; 
    position: absolute; 
    margin-top: 0px; 
} 
</style> 
</HEAD> 
<BODY> 
<!-- Enter in test elements here --> 
<div style="overflow: auto;"> 
    <div id="evilFloatomoton" style="float: left; height: 200px; width: 100%;"> 
     CONTENT<br /><br /> 
    </div> 
</div> 
<div id="scrollingDiv" style="background-color: #000; color: #FFF;"> 
    Scrolling floating div of doom 
</div> 
<div style="height: 180px; border: solid 1px #000;"> 
    *Highlight the 180 px scroll area* 
</div> 
<div style="height: 10000px;"> 

</div> 
</BODY> 
</HTML>

所以而不是像我想的那样违背顶级边缘，它在我的测试中位于页面的一半。谁能帮我？

来源

2010-08-05 C Bauer

对于您的滚动大容器，将样式设置为Position：absolute和top：0px。这应该让你的浮动div在一个地方。

来源

2010-08-05 20:16:17 Seth

jQuery获得边缘需要将元素放在屏幕上方

回答

相关问题