简体   繁体   中英

Fixed position in only one direction in future releases of CSS?

I know CSS is not supporting position: fixed for only x or y but only for both a the same time.

The common approach to solve this seem to be to use fixed positioning in combination with jquery to re-position the component with respect to the scroll amount in the non-fixed axis. The downside with this is that the component will lag a lot when scrolling in this direction.

My question is if this is a problem that is being looked at for future specs of CSS? Anyone know?

I think we need a fixed-x and and fixed-y positioning value.

This is especially becoming a problem now with touch devices where scrolling in both dimensions are more common.

Here's a fiddle:

http://jsfiddle.net/UfZPa/1/

which shows what I'm after but not the actual problem because this very small example is very fast as it looks now.

Update

From the CSS ED :

Intersection between the stickily positioned element and the bottom of the sticky-constraint rectangle limits movement in any direction, so the offset never pushes the stickily positioned element outside of its containing block. However, when the element is free to move within its containing block as the page is scrolled, it appears to be pinned to the relevant flow root edges, similarly to a fixed position element .

I think this is describing what I want but I'm not sure...

Update 2

To clarify my app is basically a grid with scroll-overflow in both x and y (like Excel). What I want is some labels to stick at the edges in one directionwhen being scrolled out of view but at the same time stay in the normal flow in the opposite direction. I want this for both fixed-x/flow-y and fixed-y/flow-x. And the problem again: With lots of labels this makes scrolling very laggy using the jquery-solution. I think we are missing an option to make components fix in only one dimension and still flow in the other. Maybee I'm the only one wanting this =)

A quick skim through some CSSWG notes such as this one leads me to believe that position: sticky might be a potential solution to this problem, provided you only specify the offsets on the axis you want the element to be fixed.

There is a point of concern though: unlike a fixed element which is considered absolutely positioned, a sticky element starts out relative to its containing block. Since relatively-positioned elements are not taken out of the normal flow, you will have to account for the layout of other elements in the same flow as your element, among other things, and (thus?) forcing the element to act like it's fixed regardless of scroll position may be a little more difficult.

Of course, there is too little information and implementation available to verify any of this — I'm just making an informed guess, and the document I link to is an ED not meant for general reference — but you can always ask the www-style mailing list and see what the good folks there have to say. I haven't experimented enough with position: sticky to be able to comment further myself.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM