CSS: fixed position on x-axis but not y?

by

Its a simple technique using the script also. You can check a demo here too.

JQuery

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

CSS

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Update Credit: @PierredeLESPINAY

As commented, to make the script support the changes in the css without having to recode them in the script. You can use the following.

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset //Use it later
    });
});

Demo 🙂

More Related Contents:

  1. When to use margin vs padding in CSS [closed]
  2. How do CSS triangles work?
  3. CSS Selector that applies to elements with two classes
  4. Set size on background image with CSS?
  5. How to make flexbox items the same size?
  6. Prevent body scrolling but allow overlay scrolling
  7. How to vertically align an image inside a div
  8. The difference between percentage and fr units
  9. How to change colour of blue highlight on select box dropdown
  10. Handling a colon in an element ID in a CSS selector [duplicate]
  11. Is background-position-x (background-position-y) a standard W3C CSS property?
  12. How to dynamically generate a list of classes with commas separating them?
  13. How do I style the HTML5 form validation error messages with CSS?
  14. How does border-image work with linear-gradient?
  15. Is it possible to center an inline-block element and if so, how?
  16. override css for html5 form validation/required popup
  17. Input widths on Bootstrap 3
  18. Combine :after with :hover
  19. CSS Input with width: 100% goes outside parent’s bound
  20. CSS: bolding some text without changing its container’s size
  21. :active css selector not working for IE8 and IE9
  22. Can a CSS pixel be a fraction?
  23. layer on top of PDF
  24. Multiple image cross fading in CSS – without (java) script
  25. Sass negative variable value?
  26. CSS transition between left -> right and top -> bottom positions
  27. Firefox blurs an image when scaled through external CSS or inline style.
  28. does a background-attachment of fixed work in iOS5?
  29. How to override stylesheets of PrimeFaces? [duplicate]
  30. How is padding-top as a percentage related to the parent’s width?

Leave a Comment