0

我正在尝试在网站内容上方添加向下滑动的内容块。向下滑动块应将所有网站内容向下推至向下滑动块内内容的高度。不幸的是，当使用带有附加标题的 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 hack？

4

2 回答 2

0

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

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

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

于 2013-09-20T21:56:45.753 回答
0

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

如果您要添加它，您可以为您.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;
}
于 2013-09-20T22:00:49.783 回答