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

时间：2015-11-23 10:08:51

标签： jquery html css

我有一个固定的标题，它有几列。 我给了div水平滚动，但问题是固定标题div不随滚动移动。我想在顶部修复它并水平滚动，以便当窗口水平滚动时tesy6，test7也会显示。

＆＃13;
＆＃13; 
$(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");
        }
    });
});
＆＃13; 
#row {
    white-space: nowrap;
    /* important */
    overflow: auto;
}
.items {
    display: inline-block;
    width: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

非常感谢任何帮助。

2 个答案:

答案 0 :(得分：1)

删除

position: "fixed"

来自您js代码并尝试。

感谢。

答案 1 :(得分：0)

尝试使用此解决方案。

<强>的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

相关问题
最新问题