移动端页面滑动导航固定在顶部（position:sticky）

ianutt

已于 2022-06-01 16:09:45 修改

阅读量1k

点赞数

文章标签： css

于 2021-04-16 10:30:50 首次发布

本文链接：https://blog.csdn.net/ianutt/article/details/115750385

版权

HTMLCSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>positionSticky</title> 
<style>
        * {margin: 0;padding: 0;}
        .header {width: 100%;height: 100px;background: red;}
        .container {width: 100%;height: 1000px;background: #ccc;}
        .liveDiv {top: 0;width: 100%;height: 50px;background: green;}
        .sticky {position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;position: sticky;}
        .scale {transform: scale(0.5);transform-origin: 0% 0%;}
</style> 
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script> </head> <body> <div class="header"></div> <div class="container"> <div class="liveDiv"></div> </div> <script>
/*
 * 菜单移动到顶部后定位在顶部
 * message[菜单的id名或者class类名]
 * height[菜单距离顶部的距离]
 */
function navChangeArea(message, height) {
    var liveDiv = $("#" + message).length ? $("#" + message) : $("." + message);
    //判断浏览器是安卓还是苹果的
    if(/android/i.test(navigator.userAgent)){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop < height) {
            liveDiv.css("position", "relative");
        } else {
            liveDiv.css("position", "fixed");
        }
    }
    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
        liveDiv.addClass("sticky");
    }
}
$(window).bind("scroll", function() {
    navChangeArea("liveDiv", 100);
});
$(window).bind("touchmove", function() {
    navChangeArea("liveDiv", 100);
});
</script> 
</body> 
</html>