jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

Tags: jquery,css,jquery-selectors

Problem :

I'm sorry for posting this for a second time but I need a jQuery solution. The original solution doesn't work in Chrome but works on the jsFiddle site (even when opened in Chrome).

Here are the details again: 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).


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


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


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

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

Thank you once again!!

Solution :

try this:

    $('#wrapper').css('left', initOL - ($(document).scrollLeft() - initSL + ' px'));

The jQuery .css function sets the css values as strings.

The scroll values you retreive from $(document).scrollLeft() are in pixels.

    CSS Howto..

    How do I add a placeholder for vertical scrollbar with twitter bootstrap 2.0?

    How can I import a single string line of text to multiple HTML files?

    How to align text sideways using css transform

    How do I get text to wrap to not break out of the box using CSS?

    How to include materialize-css npm package with webpack

    CSS - How to set many div width with a non-round percentage to fill a parent div space

    How to fix IE7 float-clear combination

    show two texts for one mouseOver event

    How can I do the following thing without inline styling?

    How do I target a div without a class or id but with all these specific style-attributes

    How do I hide images that have a certain class when creating a pdf from html?

    css show separator icon for icons

    How to style just one type of input field without also affecting other input types with CSS

    How do I add a CSS3 transition to an image overlay?

    How to Fade In Background on Page Load - jQuery

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to configure a child div to display scrollbars only when a parent div percentage settings require it

    How to animate a child element with dynamic width content to the center of its parent div, jquery, greensock, css

    How do i add an external CSS file as well as CSS in the HTML file?

    How to make a HTML NavBar [closed]

    CSS: how to add white space before element's content?

    How to use HTML/CSS to show images and titles inline?

    How to toggle a div to slide up and down

    HTML/CSS: how to position forms? [closed]

    How to reset the CSS of HTML Elements?

    How to hide repeated content from search engines with CSS?

    how to change :nth element background size

    How to make transition effect on css sprite hover

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    how change all fonts of a telerik control by one shot