Question

我正在尝试在网站内容上方添加下拉内容块。向下滑动块应该将所有网站内容压缩到下滑块内的内容高度。不幸的是，当使用带有附加标题的Twitter Bootstrap时，由于固定位置元素在其上方添加内容时不会移动，因此无法实现此目的。

我正在使用简单的jQuery slideDown函数来下载内容。这是简化的标记示例：

<body>
    <div class="slide-down">slide content</div>
    <div class="fixed-position-header">header</div>
    <div class="main-content">
        <div class="fixed-position-sidebar">sidebar</div>
        <div class="main-content">main-content</div>
    </div>
    <div class="footer">footer</div>
</body>

任何人都知道如何实现这一目标？ Javascript还是一些聪明的CSS黑客？

Answer 1

您只需在jQuery中添加一些行，这些行将同时为您的标题和侧边栏设置动画。

$('.button').click(function(){
    $('.fixed-position-header, .fixed-position-sidebar').animate({top: '50px'});
});

当然，您必须添加一些逻辑以确保它向上动画并确保顶部值与下滑高度值类似。

Answer 2

您是在添加块，还是只是显示它？

如果您要添加它，可以使用以下内容设置.fixed-position-header

.slide-down ~ .fixed-position-header {
    transition: .5s top ease;
    top: 50px;
}

如果你只是在显示它，当你显示它时，用一个类来做，然后相应地设置样式。

$('.slide-down').addClass('active');

CSS：

.slide-down {
    display: none;
}
.slide-down.active {
    display: block;
}
.slide-down.active ~ .fixed-position-header {
    transition: .5s top ease;
    top: 50px;
}

如何在主体中使用固定位置元素时将网站内容向下推，插入上面的内容

2 个答案: