Javascript JQuery滑动切换固定div,同时按下conent的其余部分
我正在尝试创建一个标题是固定的网站。在标题上方,我在-40px处有一个“login”div,因此只显示“login”选项卡。我试图让jQuery将所有内容(页眉、容器、页脚等)向下推40像素,以使登录表单可见。我该怎么做 这是我的header.php,包括:Javascript JQuery滑动切换固定div,同时按下conent的其余部分,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试创建一个标题是固定的网站。在标题上方,我在-40px处有一个“login”div,因此只显示“login”选项卡。我试图让jQuery将所有内容(页眉、容器、页脚等)向下推40像素,以使登录表单可见。我该怎么做 这是我的header.php,包括: <div id="login" class="full"> <div id="login-form" class="container"> <input type
<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">
标题bg div:
#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;
}
有什么建议吗??我真的迷路了。谢谢大家! 如果标题是
位置:固定的
它将永远不会受到页面上其他内容的影响。您有几个选择:
- 使用javascript向下推送内容
- 重新构造css/html,这样您就不会使用
,或者至少在上面没有任何内容位置:fixed
- 包含带有固定标题的登录内容,因此它们位于相同的呈现上下文中
#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;
}