移動端開發——吸頂效果的解決方案

阿新 • • 發佈：2019-01-20

一、前言

吸頂效果是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>

移動端開發——吸頂效果的解決方案

一、前言

二、在移動端開發遇到的問題

三、解決思路

移動端開發——吸頂效果的解決方案

移動端圖片壓縮上傳解決方案

轉：2016HTML5移動端最新兼容問題解決方案；

移動端兼容性問題解決方案

HTML5移動端最新兼容問題解決方案

javascript移動端禁止頁面滑動的解決方案

移動端border 1px 問題完美解決方案

移動端字型小於12px的解決方案

移動端H5頁面生成圖片解決方案

移動端響應佈局的LESS解決方案

移動端開發經常遇見的問題以及解決方案

移動端video標簽默認置頂的解決方案

移動端開發常見問題解決方案彙總- Javascript技巧（一）

移動端開發H5頁面點選按鈕後出現閃爍或黑色背景的解決辦法

js 實現在移動端開發，解決不同手機畫素大小的相容問題

移動端開發底部元素margin-bottom失效解決辦法

Vue開發——實現吸頂效果

iOS 蘋果開發證書失效的解決方案(Failed to locate or generate matching signing assets)

移動端開發用touch事件還是click事件

關於移動端開發時iOS上滑屏卡頓的問題，以及電話類數字的樣式失控問題

移動端開發——吸頂效果的解決方案

一、前言

二、在移動端開發遇到的問題

三、解決思路

相關推薦