html - Div 固定在顶部，但仍可水平滚动

Question

我想将网页的标题固定到顶部，例如使用 position:fixed; 在 CSS 中，但是如果浏览器的宽度小于标题的 1000 像素宽度，我希望它可以与页面的其余部分一起水平滚动。

当然，我可以使用 javascript 来更改 div 的最高值以及绝对定位，但我更喜欢没有 javascript 的人也可以访问该功能。谢谢！

Answer 1

对不起，没有办法。您也可以将其固定并水平滚动，如下所示：

$(window).scroll(function(){
    var leftScroll = $(document).scrollLeft();
    $('.fixedElement').css({'margin-left':-leftScroll});
});

Answer 2

默认情况下它将水平滚动，但我认为您的意思可能是随内容垂直滚动。

您可以使用 CSS 媒体查询来实现这一点。

@media all and (max-width: 1000px) {
    #header {
        position: static;
    }
}

http://jsbin.com/UGasor/1

Answer 3

页眉固定在页面顶部并在小尺寸上水平滚动（此处，尺寸小于 600 像素宽）

header{
    position:fixed;
    top:0px;
    width:100%;
    overflow-x:auto;
}
div{
    width:100%;
    min-width:600px;
}

<header>
    <div> [ content ] </div>
</header>

http://jsfiddle.net/daCrosby/USMgD/