Question

当有人按下输入字段时，我试图让div滑到屏幕顶部。我遇到的问题是，不是div从屏幕顶部移动50px而是从它所在的div的顶部移动50px。

这是真正的代码：

HTML

<div class="home-nav">
    <div style="display: none;position: absolute;margin-top: -1px" id="search-box">
        <form action="/" method="get"><input type="text" name="q" class="q" /></form>
    </div>
</div>

JavaScript

    $(".q").keydown(function(e){
        if(e.keyCode == 13){
            var val = $(this).val();
            window.location = "#q="+val;
            $(".space").animate({
                width: "100px"
            }, "slow");
            $("#search-box").animate({
                top: "50px"
            }, "slow");
            return false;
        }
    });

CSS

div.home-nav{
    line-height: 4em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 300px;
    height: 300px;
    margin: auto;
}

我将内部div定位为绝对的原因是因为当你点击链接时div /输入将覆盖链接以获得一点效果。

Answer 1

如果您不希望.sub在动画时相对于.main定位，请不要将其放在HTML中的.main中。

http://jsfiddle.net/rtxu2/10/

<div class="main"></div>
<div class="sub">
    <form>
        <input type="text" />
    </form>
</div>

Answer 2

尝试将div设置为固定，如果您希望将其相对于屏幕顶部放置，而不是将其放置在内部。

div.home-nav{
    line-height: 4em;
    position: fixed;
    top: 0;
    left: 300px;
    height: 300px;
    margin: auto;
}

Answer 3

好的，我明白了！我做了什么，是从div中删除元素并在有人按下进入时将其放入体内。然后我去做动画。如果有人有更好的方法请发帖！

    $(".q").keydown(function(e){
        if(e.keyCode == 13){
            var val = $(this).val();
            var item = $(this).closest("#search-box");
            var left = item.offset().left;
            var top = item.offset().top;

            $(this).closest("#search-box").remove();
            item.css({
                top: top + "px",
                left: left + "px",
                zIndex: 100
            })
            $("body").prepend(item);

            window.location = "#q="+val;
            $(".space").animate({
                width: "100px"
            }, "slow");
            item.animate({
                top: "35px"
            }, "slow");
            return false;
        }
    });

将div滑动到屏幕顶部

3 个答案: