网站建设平台软件哪个好用,牙科网站建设,路由器 做网站,宁波网站建设公司比较好一、描述 就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在可视区域内,显示的效果与position:relative 一致#xff0c;当元素被滑动出可视区域外是,显示效果与position:fixed一致
二、注意事项 1、父元素需要存在滚动#xff08;overflow:auto…一、描述 就是在一个滚动的容器里,将一个子元素设置为postion:sticky 在元素显示在可视区域内,显示的效果与position:relative 一致当元素被滑动出可视区域外是,显示效果与position:fixed一致
二、注意事项 1、父元素需要存在滚动overflow:autooverflow:scroll否则postion:sticky不生效 2、sticky元素必须配置top、right、bottom、left其中之一否则postion:sticky不生效 3、父元素的高度不能低于sticky元素元素高度否则postion:sticky不生效
三、效果
1、吸顶效果
【1】code
html
div classparent-contentdiv classsticky吸顶/divdiv classcontentp我是内容/pp我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p /div
/divcss
.parent-content {width: 400px;height: 400px;background-color: #bfbfbf;overflow: auto;
}
.sticky{position:sticky;top:0;width: 100%;height: 40px;background-color: lightseagreen;}
.content {width: 100%;height: 600px;background-color:thistle;
}
效果
默认效果 滚动效果 2、折叠面板
html
button (click)createComponent()创建组件/button
button (click)removeComponent()删除组件/button
ng-container #container/ng-container
div classparent-contentdiv classsticky sticky-1吸顶1/divdiv classcontentp我是内容/pp我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p p我是内容/p /divdiv classsticky sticky-2吸顶2/divdiv classcontentp我是内容2/pp我是内容2/p p我是内容2/p p我是内容2/p p我是内容2/p p我是内容2/p p我是内容2/pp我是内容2/p p我是内容2/p p我是内容2/p p我是内容2/p p我是内容2/p /divdiv classsticky sticky-3吸顶3/divdiv classcontentp我是内容3/pp我是内容3/p p我是内容3/p p我是内容3/p p我是内容3/p p我是内容3/p /div
/divcss
.parent-content {width: 400px;height: 400px;background-color: #bfbfbf;overflow: auto;
}
.content {width: 100%;height: 600px;background-color:thistle;
}.sticky {position:sticky; width: 100%;height: 40px;}.sticky-1 {top:0;background-color: lightseagreen;}.sticky-2 {top:40px; /* top值是sticky内容1倍 */background-color:blue;}.sticky-3 {top:80px; /* top值是sticky内容2倍 */background-color:blueviolet;}
效果
默认效果 滚动时效果 折叠后效果
