CSS fixed position on x-axis but not y

Question

Is there a way to fix a position on the x-axis only  So when a user scrolls up  the div tag will scroll up with it  but not side to side

User · Answer

This is an old thread but CSS3 has a solution   position  sticky    Have a look at this blog post   Demonstration     And this documentation

User · Answer

Very easy solution is   window onscroll   function       document getElementById  header   style left  15 -  document documentElement scrollLeft   document body scrollLeft   px

User · Answer

I realize this thread is mighty old but it helped me come up with a solution for my project   In my case I had a header that I wanted to never be less than 1000px wide  header always on top  with content that could go unlimited right   header position fixed  min-width 1024px    lt header data-min-width  1024  gt  lt  header gt         window  on  scroll resize   function              var header      header            if    this  width    lt  header data  min-width                  header css  left   -  this  scrollLeft               else               header css  left                            This also should handle when your browser is less than your headers min-width

User · Answer

This is a very old thread  but I have found a pure CSS solution to this using some creative nesting  I wasn t a fan of the jQuery method at all     Fiddle here  https   jsfiddle net 4jeuv5jq    lt div id  wrapper  gt       lt div id  fixeditem  gt          Haha  I am a header  Nah   Nah na na na      lt  div gt       lt div id  contentwrapper  gt           lt div id  content  gt              Lorem ipsum               lt  div gt       lt  div gt   lt  div gt    wrapper   position  relative  width  100   overflow  scroll      fixeditem   position  absolute      contentwrapper   width  100   overflow  scroll      content   width  1000px  height  2000px

User · Answer

If your block is originally positioned as static  you may want to try this   x000D   x000D    window  on  scroll   function      x000D   x000D    var  w     window   x000D        position-fixed-x   css  left    w scrollLeft     x000D        position-fixed-y   css  top    w scrollTop     x000D   x000D      x000D   container   x000D    width  1000px  x000D    x000D   x000D   position-fixed-x   x000D    position  relative   x000D    x000D   x000D   position-fixed-y   x000D    position  relative  x000D    x000D   x000D   blue-box   x000D    background blue  x000D    width  50px  x000D    height  50px  x000D    x000D   x000D   red-box   x000D    background  red  x000D    width  50px  x000D    height  50px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  container  gt  x000D   x000D   lt div class  position-fixed-y red-box  gt  x000D     x000D   lt  div gt  x000D   x000D  The pattern of base pairs in the DNA double helix encodes the instructions for building the proteins necessary to construct an entire organism  DNA  or deoxyribonucleic acid  is found within most cells of an organism  and most organisms have their own unique DNA code  One exception to this is cloned organisms  which have the same exact DNA code as their parents do  x000D   x000D   lt div class  position-fixed-x blue-box  gt  x000D     x000D   lt  div gt  x000D   x000D  DNA strands are composed of millions of sub-units  called nucleotides  Each nucleotide contains a 5-carbon sugar  a phosphate group and a nitrogen base  There are four different variations of the nitrogen base group  responsible for all of the variation between two different DNA strands  The four different variations are called adenine  guanine  cytosine and thymine  but they are typically abbreviated and only referred to by their first letter  The sequence of these different nitrogen bases makes up the code of the DNA  x000D   x000D  The DNA strand splits in two  and forms two different DNA strands during cell replication  However  sometimes this process is not perfect  and mistakes occur  These mistakes may change the way an organism is constructed or functions  When this happens  it is called a mutation  These mutations can be helpful or harmful  and they are usually passed on to the organism   s offspring  x000D     x000D   The traits of a living thing depend on the complex mixture of interacting components inside it  Proteins do much of the chemical work inside cells  so they largely determine what those traits are  But those proteins owe their existence to the DNA  deoxyribonucleic acid   so that is where we must look for the answer  x000D  The easiest way to understand how DNA is organized is to start with its basic building blocks  DNA consists of four different sugars that interact with each other in specific ways  These four sugars are called nucleotide bases and have the names adenine  A   thymine  T   cytosine  C  and guanine  G   Think of these four bases as letters in an alphabet  the alphabet of life  x000D  If we hook up these nucleotides into a sequence--for example  GATCATCCG--we now have a little piece of DNA  or a very short word  A much longer piece of DNA can therefore be the equivalent of different words connected to make a sentence  or gene  that describes how to build a protein  And a still longer piece of DNA could contain information about when that protein should be made  All the DNA in a cell gives us enough words and sentences to serve as a master description or blueprint for a human  or an animal  a plant  or a microorganism   x000D  Of course  the details are a little more complicated than that  In practice  active stretches of DNA must be copied as a similar message molecule called RNA  The words in the RNA then need to be  read  to produce the proteins  which are themselves stretches of words made up of a different alphabet  the amino acid alphabet  Nobel laureates Linus Pauling  who discerned the structure of proteins  and James Watson and Francis Crick  who later deciphered the helical structure of DNA  helped us to understand this  Central Dogma  of heredity--that the DNA code turns into an RNA message that has the ability to organize 20 amino acids into a complex protein  DNA - gt  RNA - gt  Protein  x000D  To understand how this all comes together  consider the trait for blue eyes  DNA for a blue-eyes gene is copied as a blue-eyes RNA message  That message is then translated into the blue protein pigments found in the cells of the eye  For every trait we have--eye color  skin color and so on--there is a gene or group of genes that controls the trait by producing first the message and then the protein  Sperm cells and eggs cells are specialized to carry DNA in such a way that  at fertilization  a new individual with traits from both its mother and father is created  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I stumbled on this post looking for a nice way to keep my header navigation bar centered and responsive to size changes     CSS  nav-container     height  60px     The static height     width  100      Makes it responsive to resizing the browser     position  fixed     So that it will always be in the center        jQuery   window  scroll      gt      if    document  scrollTop    lt  60            nav-container   css  top     document  scrollTop     -1           As we scroll  the bar moves upwards off the screen  If you scroll left right it will stay fixed

User · Answer

If you want to fix it on the right  for example  use justify-content  flex-end   More  http   www w3schools com cssref css3 pr justify-content asp

User · Answer

No  it s not possible with pure CSS  That kind of positioning fixes the element in the viewport  I d suggest simply fixing the element to one of the sides of the viewport  i e  top  bottom  left or right  so that it doesn t interfere with other content

User · Answer

Yes  You actually can do that only by using CSS     body   width 100   margin-right  0  margin-left 0  padding-right 0  padding-left 0      Tell me if it works

User · Answer

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

User · Answer

Sounds like you need to use position fixed and then set the the top position to a percentage and the and either the left or the right position to a fixed unit

User · Answer

Now that mobile is over 70  from the internet market you can create something smart and responsive to do that   You can create this very easy with only css  use a overflow-x scroll for a container and a overflow-y scroll for another container  You can easily position the container elements with width 100vw and height 100vh   Middle click on the example to test it  Works best on mobile because you dont see the scroll bars    x000D   x000D  body max-width 100   x000D    box-sizing border-box   x000D   container background  ddd overflow-y scroll width 500px max-height 100vh   x000D   header background  pink   x000D   body background  teal padding 20px min-width  100  overflow scroll overflow-y hidden min-height 300px   x000D   body  gt div min-width 800px   x000D   lt body gt  x000D     lt div class  container  gt  x000D       lt div class  header  gt  x000D         Button 1  gt  Button 2  gt  Button 3 x000D       lt  div gt  x000D       lt div class  body  gt  x000D         lt div gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum x000D   lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum x000D   lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum lt br gt  lt br gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum x000D        lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

On parent div you can add  overflow-y  scroll   overflow-x  hidden

User · Answer

I just added position absolute and that solved my problem

User · Answer

Updated the script to check the start position   function float horizontal scroll id    var el   jQuery id   var isLeft   el css  left        auto   var start    isLeft   el css  left     el css  right    replace  px         jQuery window  scroll function          var leftScroll   jQuery this  scrollLeft        if  isLeft          el css    left    start   leftScroll     px          else         el css    right    start - leftScroll     px

User · Answer

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               Thanks

User · Answer

Starx s solution was extremely helpful to me  But I had some problems when I tried to implement a vertical scrolling sidebar with it  Here was my initial code  based on what Starx wrote   function fix vertical scroll id          window  scroll function              id  css                top     this  scrollTop     Use it later                         It s slightly different from Starx s solution  because I think his code is designed to allow a menu to float horizontally instead of vertically  But that s just an aside  The problem I had with the above code is that in a lot of browsers  or depending on the resource load of the computer  the menu movements would be choppy  whereas the initial css solution was nice and smooth  I attribute this to browsers being slower at firing javascript events than at implementing css   My alternate solution to this choppiness problem is set the frame to fixed instead of absolute  then cancel out the horizontal movements using starx s method    function float horizontal scroll id        jQuery window  scroll function            jQuery id  css                left   0 - jQuery this  scrollLeft                           leftframe    position fixed   width  200         You might say all I m doing is trading vertical scrolling choppiness for horizontal scrolling choppiness  But the thing is  99  of scrolling is vertical  and it s much more annoying when that is choppy than when horizontal scrolling is   Here s my related post on this matter  if I haven t already exhausted everyone s patience  Fixing a menu in one direction in jquery

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

Examples related to css