将div移到屏幕顶部

问题描述：

我想让某个div滑动到屏幕的顶部，当有人在输入字段中按Enter时。我遇到的问题是，不是从屏幕顶部的div移动50像素从股利是在顶部50像素移动将div移到屏幕顶部

这里是真正的代码：

的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 /输入将覆盖链接，有点效果。

答

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

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

即使在滚动时也不会保留在那里吗？ – 2013-03-13 01:37:31

是的，它会的。我考虑过屏幕顶部的措辞。当然，它总是可以滚动的，但我同意伊舍伍德的最新答案--HTMl应该与众不同。 – Spork 2013-03-13 02:05:25

答

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

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

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

启动页面顶部的div。它需要在div中。然后按回车键滑动到页面顶部。 – 2013-03-13 01:40:49

@RyanNaddy - 它必须在div之外，否则你需要一个负的y位置。 – 2013-03-13 01:47:17

它不必在div内。它只需定位正确。 – isherwood 2013-03-13 01:47:54

答

好吧，我知道了！我做了什么，是从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移到屏幕顶部

相关推荐