问题描述:

I've an fixed header which is having couple of columns.

I have given horizontal scroll to the div, but the problem is fixed header div is not moving with the scroll. I want to fix it at the top and scroll horizontally so that tesy6, test7 will also get displayed when the window is scrolled horizontally.

$(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>

网友答案:

You can't have actual fixed positioning only one way.

You can fake it using the same idea of dynamic scrolling, but only for the top, giving the header a relative positioning, and keeping it level to the window scroll

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;
}

JS

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

fiddle

P.S. Still having a problem with the background when scrolling

Edit

Using an after pseudo element I got the background to be in place, see updated CSS & fiddle above.

网友答案:

Remove

position: "fixed"

from you js code and try.

Thanks.

网友答案:

Try to use this solution.

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

相关阅读:
Top