uniapp:粘性布局(吸顶:u-sticky)生效的注意事项

  • 使用场景:要求首次渲染时不需要固定在页面顶部(正常布局),当随着页面的滚动,需要将起固定在页面顶部,会使用到可能的有:tab、搜索框、导航、标题、头图…
  • 工具:用了uview2的组件

uniapp:粘性布局(吸顶:u-sticky)生效的注意事项_第1张图片 

  • 自定义css样式:position:sticky
//粘性布局的基本样式
.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
}
  • 问题:样式写好了,可以查看到,但是粘性布局没有生效
  • 注意事项:

-- 父元素高度必须大于sticky元素的高度

-- 父元素高度没有设置父元素以及祖先元素都不能使用除了overflow的visiable以外的其他属性,比如auto、scroll、hidden

-- 父元素高度设置,子元素高度超过父元素高度,父元素使用overflow的auto、scroll等属性,此时有滚动,sticky依然是有效

-- 设置了sticky属性,还需要设置top、bottom、left、right中的至少一个值搭配使用

-- 嵌套使用sticky属性时,一定要注意自己使用的原因是什么,要对什么内容进行吸顶的操作

  • 小编这次出现设置之后未生效的原因:父元素高度没有设置,但是父元素的父元素设置了overflow:hidden,导致效果没有实现。所以除了父元素还要留意自己写的祖先元素的样式!!

你可能感兴趣的:(uni-app,bug,css3,sticky,粘性布局/吸顶)