Position Fixed - Horizontal Scroll

How do I get a fixed position div to scroll horizontally with the content? Using jQuery

The demo is keeping the element's position:fixed and manipulating the left property of the element:

var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});

Using leftInit takes a possible left margin into account. Try it out here: http://jsfiddle.net/F7Bme/

How to make one column have position fixed on horizontal scroll only?

position sticky should work

.btn-control {
  position: sticky;
  right: 0;
}

if it work you can change right position

Horizontal scrolling not working when position absolute/fixed

You can fix it by adding width 100% to your image container

.wide-as-needed {
  ...
  width:100%;
}

Demo: http://codepen.io/anon/pen/EVYqwm

How to make position fixed div scroll horizontally?

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.

Making fixed div's able to horizontally scroll

That's as simple as put overflow-x: auto in your header with 100% width.

 .header { 
   overflow: auto;
 }

By this mode, you'll have a header with 100% of width, in small screens you'll see how it shrinks. With the hard pixel definition of the elements inside the header (as 1024px), your content will have this width and the overflow in the parent allows you to scroll it horizontally.

If this doesn't fits with your requirements, maybe you need a global scroll solution, that can be made with simply javascript.

EDIT

As we talk in comments, your solution will be to handle global horizontal scroll and move the fixed header with the content, like a relative or absolute header. To make this you need javascript to read how many pixels you need to move the fixed header. Here you are the complete code:

// when scroll
$(window).on('scroll', function(e) {
    //calculate left position
    var left = $(this).scrollLeft();
    //apply to header in negative
    $('.header').css('left', -left);
});

Do you like to see it working? Try this fiddle:

http://jsfiddle.net/fbvat00q/

EDIT 2

As far as you need to have the background fixed, you must to relativize the children and target it in the javascript. So your final code will be:

CSS:

.headerbar {
      position: relative;
}

Javascript:

$(window).on('scroll', function(e) {
    var left = $(this).scrollLeft();
    $('.headerbar').css('left', -left);
});

See it working:

http://jsfiddle.net/fbvat00q/1/

---

Related Topics