Question

I have a parent div with a fixed position and inside of that div I have the main div with a relative position. While I scroll the bar up and down it follows me (this I want) but I don’t want it to follow me when I scroll the bar left to right (or right to left).

HTML:

<div id="wrapper">
   <div id="icons">
      icons
   </div>
</div

CSS:

#wrapper {
    position: fixed;
    z-index: 1000;
    top: 155px;
}
#icons  {
    width: 42px;
    position: relative;
    left: -67px;
}

Thank you!!

Answer 1

You basically have to changed the left value of #wrapper based off of its initial position and the current $(document).scrollLeft() value:

var initSL = $(document).scrollLeft(),
    initOL = $('#wrapper').offset().left;

$(document).scroll(function(e){
    $('#wrapper').css('left', initOL - ($(document).scrollLeft() - initSL));
});

See example →