將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 /輸入將覆蓋鏈接，有點效果。

來源

2013-03-13 Get Off My Lawn

嘗試將div設置爲固定，如果您希望它相對於屏幕頂部放置，而不是放置在其內部的div。

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

來源

2013-03-13 01:36:46 Spork

即使在滾動時也不會保留在那裏嗎？ – 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>

來源

2013-03-13 01:37:27 isherwood

啓動頁面頂部的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; 
     } 
    });

來源

2013-03-13 01:57:51

將div移到屏幕頂部

回答

相關問題