Question

我在Internet Explorer 6和FF中遇到了一个问题，我正试图在jQuery中实现。基本上，页面顶部有一个对象使用浮动内容，似乎干扰了$（window）.scrollTop（）属性。

这是我的理解（如果我错了，请通过告诉我正确的方法帮助我！）$（window）.scrollTop（）将返回通过滚动隐藏的空白。我做了一些没有浮动内容的测试，他们似乎支持这个。

这是我的代码：

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

所以不要像我想的那样反对上边缘，而是在测试中它位于页面的中间位置。任何人都可以帮助我吗？

Answer 1

对于scrollingDiv容器，将样式设置为Position：absolute和top：0px。这应该让你的浮动div保持在一个位置。

jQuery获得了将元素放在屏幕顶部所需的margin-top

1 个答案: