如何使位置固定的div水平滚动？答案

【问题标题】：How to make position fixed div scroll horizontally?如何使位置固定的div水平滚动？
【发布时间】：2015-11-23 10:08:50
【问题描述】：

我有一个固定的标题，它有几列。我已经为 div 提供了水平滚动，但问题是固定的标题 div 不随滚动移动。我想把它固定在顶部并水平滚动，这样当窗口水平滚动时，tesy6、test7也会显示出来。

$(document).ready(function() {
    var lastScrollLeft = 0;
    $(window).scroll(function() {
        
        var x = $(window).scrollTop();
        if (x > 140) {
            
            $('.headerp').css({
                position: "fixed",
                zIndex: 999,
                top: "180px",
                left: "15px",
                right: "15px"
            });
        } else if (x < 140) {
            $('.headerp').removeAttr("style");
        }
    });
});

#row {
    white-space: nowrap;
    /* important */
    overflow: auto;
}
.items {
    display: inline-block;
    width: 20%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<body>
    <div id="row">
        <div class="headerp">
            <div class="items">
                Test1
            </div>
            <div class="items">
                Test2
            </div>
            <div class="items">
                Test3
            </div>
            <div class="items">
                Test4
            </div>
            <div class="items">
                Test5
            </div>
            <div class="items">
                Test6
            </div>
            <div class="items">
                Test7
            </div>
            <div class="items">
                Test8
            </div>
            <div class="items">
                Test9
            </div>
            <div class="items">
                Test10
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
        <div class="headers">
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 1" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 2" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 3" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 4" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 5" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 6" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 7" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 8" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 9" />
            </div>
            <div class="items">
                <img src="http://placehold.it/200/100" alt="item 10" />
            </div>
        </div>
    </div>
</body>

任何帮助将不胜感激。

【问题讨论】：

标签： jquery html css

【解决方案1】：

删除

position: "fixed"

来自您的js 代码并尝试。

谢谢。

【讨论】：

我想修复标题。
你试过了吗？您的标题将固定在顶部。内容仅在滚动时移动。由于位置：“固定”，标题不会随着您的窗口滚动。

【解决方案2】：

您不能仅以一种方式实际定位fixed。

您可以使用与动态滚动相同的想法来伪造它，但仅限于顶部，为标题提供relative 定位，并使其与窗口滚动保持水平

CSS

.headerp {
    background: #fff;
    position:relative;
    z-index:999;
}
.headerp:after {
    content: " ";
    height: 100%;
    width: 100%;
    background: #fff;
    display: block;
    position: absolute;
    top: 0px;
    right: -100%;
    z-index: -1;
}

$(window).scroll(function () {
        var x = $(window).scrollTop();
        $('.headerp').css({
            top: x,
        });
    });

fiddle

~~附言滚动时背景仍然有问题~~

编辑

使用 after 伪元素我得到了背景，请参阅上面更新的 CSS 和小提琴。

【讨论】：

【解决方案3】：

尝试使用此解决方案。

jQuery

$(function() {
    var header = $(".headerp");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('headerp').addClass("small-header");
        } else {
            header.removeClass("small-header").addClass('headerp');
        }
    });
});

CSS

.headerp {
    position: fixed;
    background: #fff;
    width: 100%;
    padding: 20px;
    transition: all 0.3s
}
.small-header {
    padding: 10px;
    position: fixed;
    width: 100%;
    background: yellow;
    transition: all 0.3s;
}

Demo here

【讨论】：

否，固定标题不随窗口水平滚动。
它不是横向滚动