CODEWITHSUNDEEP
jqueryhtmlcss
user5064303
user5064303

Reputation: 65

How to make position fixed div scroll horizontally?

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>

Any help would greatly be appreciated.

Upvotes: 0

Views: 1875

Answers (3)

Priya Rajaram
Priya Rajaram

Reputation: 360

Remove

position: "fixed"

from you js code and try.

Thanks.

Upvotes: 1

JNF
JNF

Reputation: 3730

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.

Upvotes: 0

Booster
Booster

Reputation: 434

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

Upvotes: 0

Related Questions