search

mask2012 / MaskBlog

all blogs are in issues.
12 stars 5 forks source link

app内全屏效果 #58

Open mask2012 opened 5 years ago

mask2012 commented 5 years ago

先来看效果

GIF

解题思路

  1. 首先要用到一个特性就是position:sticky ,对于ios，写上-webkit-就可以支持得很好了，写完整是这样的 position: sticky; position: -webkit-sticky; top:63px; z-index: 99; 这个特性是给到诊股风云榜这个标题和tab栏，他们是一个整体被包在一个层
  2. 在顶部大块内容划上去的时候，要在适合的时候把置顶的bar展示出来，这里得用到一点js

实现代码

html结构是这样的 image image

css是这样的

.stick_top{ position: sticky; position: -webkit-sticky; top:63px; z-index: 99; background-color: #fff; padding: 0 0 15px; margin-top: -16px;}
.app_title_bar{ position: fixed; width: 100%; top:0; z-index: 999; padding-top: 18px; height: 45px; line-height: 45px; background-color: #fd7736; text-align: center; font-size: 18px; color: #fff; }

js是这样的

$(window).scroll(function(event){
    if(this.scrollY>=$('#introBlock').height()-63){
        $('#appTitleBar').removeClass('none');
    }else{
        $('#appTitleBar').addClass('none');
    }
});

注意细节

  1. 第一个细节是什么时候把appTitleBar展示出来？应该是滑动到顶部大块的底部的高度减去appTitleBar的高度
  2. 第二个细节是z-index，appTitleBar是fixed定位的，z-index大于stick_top层

参考资料

杀了个回马枪，还是说说position:sticky吧 https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/comment-page-1/#comment-396464