移动端开发——吸顶效果的解决方案

最新推荐文章于 2024-06-13 19:39:22 发布

newbietao

最新推荐文章于 2024-06-13 19:39:22 发布

阅读量1w

点赞数 2

分类专栏：移动端web 文章标签： web开发移动解决方案

本文链接：https://blog.csdn.net/newbietao/article/details/77944205

版权

移动端web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前言

吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。（图片来自其他博客，感谢博主）

sticky

二、在移动端开发遇到的问题

吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性。但是问题是：安卓支持scroll事件和fixed属性，但是ios8.0的scroll事件不是连续触发的，只会在scroll事件结束后触发一次scroll事件，同时ios还不支持设置fixed属性。

Ios支持position: sticky 可以很好的解决这个问题，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

可以知道sticky属性有以下几个特点：

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

三、解决思路

1.检测客户端是安卓系统还是ios系统。

2.如果是安卓系统添加scroll事件监听

3.如果是ios系统添加position: sticky

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>pc sticky</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .banner {
        height: 200px;
    }
    .nav {
        height: 40px;
        background-color: skyblue;
        border: 1px solid silver;
    }
    .sticky {
        /*滚过初始位置时自动吸顶*/
        position: -webkit-sticky;
        position: sticky;
        /*吸顶时的定位*/
        top: 0;
        left: 0;
        /*z比下方所有z高*/
        z-index: 9999;
    }
    .content {
        height: 1500px;
    }

    .fixed-top {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
    }
    </style>
</head>
<body>
    <div class="banner">Banner图</div>
    <div class="nav">吸顶元素</div>
    <div class="content">很长的内容</div>
    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
	var stickyEl = document.querySelector('.nav');
	function fixed(num) {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
        if(isAndroid) {
            document.body.onscroll = function(e) {
                var scrollT = document.body.scrollTop;
                if (scrollT > num) {
                    $(stickyEl).addClass('fixed-top');
                }else {
                    $(stickyEl).removeClass('fixed-top');
                }
            };
        }else if(isiOS) {
            $(stickyEl).addClass('sticky');
            console.log(11);
        }
    }
    fixed(200);
</script>
</body>

newbietao

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
移动端开发——吸顶效果的解决方案

一、前言吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。（图片来自其他博客，感谢博主）二、在移动端开发遇到的问题吸顶效果的基本的开发思路，利用scroll事件进行监听scrollTop的值，当scrollTop达到一定的值得时候设置吸顶元素的position : fixed;属性。但是问题是：安卓支持scroll事件和fixed属性，但是ios8.0
复制链接

扫一扫

专栏目录