CSS - How to make a relative element follow me up and down but not left and right?


Tags: jquery,css,css3,css-float

Problem :

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!!



Solution :

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 →


    CSS Howto..

    How to align both vertically and horizontally in CSS?

    How to apply more than 1 CSS styles in javaScript? [duplicate]

    How To Do A Webkit Slide Cover Page Transition

    How I make my Dropdown Menu Fade-In Using CSS

    how to remove and add classes using same function? [closed]

    How to have the nav and footer more than 1000px?

    How to center an image .logo via css? [duplicate]

    How can I position two to always be side by side

    R markdown: how to change style with internal css?

    How to create 2 separate SVG without blocking other div elements?

    How can I make an svg scale with its parent container?

    How to center align vertically the container in bootstrap

    How to reload or rerender CSS for a single HTML element? [duplicate]

    how to set transform for div without effect on background image?

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]

    How to fade out and fade in the divs sequentially

    CSS Grid Layout Module Level 1 - How long does it usually take from candidate recommendation to final spec?

    how do i get images to display in a rows like this using php and css?

    CSS Flexbox: how to change the width of the element

    How to dynamically allocate block of text using css?

    Showing the child category when Clicking the parent category

    XPath how to find second element with CSS class name

    How to make entire div change color on hover using css?

    How to use jQuery to horizontally center an object in the viewport?

    How to remove table column with CSS

    How do I disable the shadow only on one edge?

    How to utilize CSS only button markup?

    activating “authorization” causes CSS stop working! how solve it?

    How to add bootstrap css to my Wordpress plugin

    How to Properly Add CSS in a MailMessage