Javascript 固定边栏与固定标题重叠
嗨,我有一个固定位置和100%宽度的标题,我还有一个从左侧滑出的边栏,也是固定位置。问题是边栏与标题重叠,我希望边栏滑出时标题与边栏一起收缩。我认为它会自然地这样做,因为它被设置为宽度100%。但事实并非如此 有什么想法吗 谢谢 标题Javascript 固定边栏与固定标题重叠,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嗨,我有一个固定位置和100%宽度的标题,我还有一个从左侧滑出的边栏,也是固定位置。问题是边栏与标题重叠,我希望边栏滑出时标题与边栏一起收缩。我认为它会自然地这样做,因为它被设置为宽度100%。但事实并非如此 有什么想法吗 谢谢 标题 #header_wrapper{ width:100%; height: 50px; /*background-color: #dddddd;*/ background-color: #2a5f8c; border-bot
#header_wrapper{
width:100%;
height: 50px;
/*background-color: #dddddd;*/
background-color: #2a5f8c;
border-bottom: 2px solid #ffffff;
float: left;
position: fixed;
z-index: 80;
border-bottom: 1px solid #444444;
}
边栏
#category_wrapper{
width: 200px;
height: 100%;
position: fixed;
float: left;
border-right: 3px solid #333;
display: none;
}
Jquery
$("#header_category").click(function () {
$('#category_wrapper').toggle(200);
});
HTML
与其将标题宽度设置为100%,不如将left属性设置为0px,将right属性设置为0px,然后当菜单滑出时,只需将left属性设置为left菜单的宽度,然后当它返回时,将其设置为零 动画示例:
$( "#category_wrapper" ).animate({
left: 200,
}, 200, function() {
// Animation complete.
});
你的HTML看起来怎么样?刚刚在原始帖子中添加了它
$( "#category_wrapper" ).animate({
left: 200,
}, 200, function() {
// Animation complete.
});