2014-02-07 18 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,或至少没有什么它上面
  • 包括:你有几种选择具有固定标题的登录内容,因此它们处于相同的渲染环境中