2014-02-07 52 views
0

我想創建一個網站的頭是固定的。在標題上方,我有一個-40px的「登錄」div,因此只顯示「登錄」選項卡。我試圖讓jQuery將所有內容(標題,容器,頁腳等)縮小到40個像素以使登錄表單可見。我將如何做到這一點?JQuery slideToggle固定divs,同時推下其餘的內容

這是我的header.php包括:

<div id="login" class="full"> 
      <div id="login-form" class="container"> 
      <input type="button" name="submit" id="submit" value="Log In"> 
      <input name="password" id="word" placeholder="PASSWORD"> 
      <input name="user" id="user" placeholder="EMAIL ADDRESS"> 

      </div> 
      <div id="login-tab" class="container"> 
       <a href="#">Log In</a> 
      </div> 
</div> 
<div id="header-bg" class="full"> 

     <header class="container group"> 
       <div id="logo" class="third"> 
          <img src="images/logo-side.png" width="100%"/> 
       </div> 
       <!--<div id="login" class=" "> 
       <form> 
       <input name="email" type="text" value=""> 
       <input name="password" type="text" value=""> 
       <input name="login-submit" type="button" value="log in"> 
       </form> 
       </div>--> 
       <nav> 
         <ul> 
          <li><a href="index.html" class="active">home</a></li> 
          <li><a href="#">development</a></li> 
          <li><a href="#">availability</a></li> 
          <li><a href="#">about</a></li> 
          <li><a href="#">contact</a></li> 
         </ul> 
       </nav> 
     </header> 
</div> 


     <div id="container" class="container"> 

的登錄DIV繼承人CSS:

#login { 
background:#365160 ; 
height:40px; 
position:fixed; 
top:-33px; 
z-index:10; 
border-bottom:1px solid #ea9919; 
font-family:Arial, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
} 
#login-tab a { 
background:#365160; 
color:#fff; 
margin-top:30px; 
margin-right:-390px; 
padding:0px 15px; 
float:right; 
border-radius:0 0 2px 2px; 
display:block; 
border-left:1px solid #ea9919;border-bottom:1px solid #ea9919;border-right:1px solid #ea9919; 
} 

頭-BG格:

#header-bg { 
position:fixed; 
top:11px; 
background:#fff url(../images/crossword.png) repeat; 
box-shadow: 0px 3px 4px 0px #999; 

border-bottom:1px solid #ccc; 
} 

任何建議?我真的迷失了。謝謝!

回答

0

如果標題爲position: fixed它不會受到頁面上其他內容的影響。讓你不使用position: fixed

  • 使用JavaScript來倒推內容
  • 重塑你的CSS/HTML,或至少沒有什麼它上面
  • 包括:你有幾種選擇具有固定標題的登錄內容,因此它們處於相同的渲染環境中