草庐IT

stickies

全部标签

css定位 position:sticky

今天在做css定位的时候遇到一个问题,我想用fixed定位下来,但是发现这个时候定义的百分百宽度不随着父元素走了而是整个屏幕的百分百,这个就很尴尬了,也不能固定宽度吧,毕竟还要宽度自适应。这个时候发现了一个position的属性-----sticky它是relative和fixed的结合体可以理解为,当我们屏幕还没有滚动出原有的范围的时候就跟relative一样,正常排列在那里,当我们屏幕滚动出去了这个时候就fixed,常用语头部或者底部一个吸顶的行为,最最关键的是,他不会像fixed一样把他的父级变成浏览器可视区域,还是你的父级

关于 javascript:Position sticky: 可滚动,当长于视口时

Positionsticky:scrollable,whenlongerthanviewport当带有position:sticky的元素"卡住"并且比视口长时,您只能在滚动到容器底部后才能看到其内容。如果"卡住"元素随着文档滚动并在到达其底部边缘时停止,那将是很酷的。如果用户向后滚动,同样的事情会再次发生,但相反。例子TLDR;有一个库(StickyKit)可以满足我的要求,但在新的异步滚动中表现不佳。带有StickyKit的JSFiddle-https://jsfiddle.net/cibulka/4nd3b0tt/-(这符合我的描述,但性能不佳,见下文)JSFiddle与原生positi

关于 javascript:Position sticky: 可滚动,当长于视口时

Positionsticky:scrollable,whenlongerthanviewport当带有position:sticky的元素"卡住"并且比视口长时,您只能在滚动到容器底部后才能看到其内容。如果"卡住"元素随着文档滚动并在到达其底部边缘时停止,那将是很酷的。如果用户向后滚动,同样的事情会再次发生,但相反。例子TLDR;有一个库(StickyKit)可以满足我的要求,但在新的异步滚动中表现不佳。带有StickyKit的JSFiddle-https://jsfiddle.net/cibulka/4nd3b0tt/-(这符合我的描述,但性能不佳,见下文)JSFiddle与原生positi