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).

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

jQuery:

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

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

Thank you once again!!



Solution :

try this:

$(document).scroll(function(e){
    $('#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 specify XPATH or CSS in Nokogiri to scrape a page's table data?

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    How can I align my HTML components with CSS?

    How to add jQuery function to hover (show) and then click to show another menu

    CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

    How to include a font .ttf using CSS?

    How to hide second row of a table using css?

    Jquery not showing select element. No errors in console

    How to formatting a simple
      in columns and bolding the first item on its own line

    Browser sizing Ctrl +/- :: How to manipulate settings?

    DOMPDF - How to render PDF to have no margins at all?

    How can I do html multi elements list with type attribute?

    HTML divs, how to wrap content?

    How to apply CSS to :last-child button

    How to insert a div below dynamic divs row after onclick

    how to animate a text in javafx using css?

    How to debug css in IE?

    How to fix the heading in html table using css

    How to create a border that fully covers the adjacent corners in CSS?

    how to keep elements in one row in css

    How to center an element horizontally and vertically?

    How to hold three different text alignments in one CSS Box?

    image carousel showing all images

    How to apply background color with css to text with line break [duplicate]

    How to add a color overlay to a background image?

    Show X and Y coordinates?

    How to use setInterval

    How do I center text next to a floating image using css?

    How to ensure CSS :hover is applied to dynamically added element

    How to create an absolutely positioned submenu which appears on css hover