吸顶效果的两种实现方式

第一种:使用fixed定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: hotpink;
        }
        nav{
            width: 100%;
            height: 80px;
            background-color: #ccc;
        }
        main{
            width: 100%;
            height: 2000px;
            background-color: yellow;
        }
        .fd{
            position: fixed;
            top: 0;   
        }
    </style>
</head>
<body>
    <header>网页头部区域</header>
    <nav>网页导航区域</nav>
    <main>主要内容区域</main>
    <script>
        var nav = document.getElementsByTagName('nav')[0]

        onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            if(scrollTop>=100){
                // 吸顶,给元素设置固定定位
                // className 通过这个属性添加一个类名
                nav.className = 'fd'
            }else{
                // 取消吸顶
                nav.className = ''
            }
        }
    </script>
</body>
</html>

第二种:使用sticky定位

关于sticky定位是什么可以参考这篇文章:sticky定位详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: hotpink;
        }
        nav{
            width: 100%;
            height: 80px;
            background-color: #ccc;
        }
        main{
            width: 100%;
            height: 2000px;
            background-color: yellow;
        }
        .fd{
            position: sticky;
            top: 0;
            right: 0;
            bottom: calc(100% - 180px);
            left: 0;   
        }
    </style>
</head>
<body>
    <header>网页头部区域</header>
    <nav>网页导航区域</nav>
    <main>主要内容区域</main>
    <script>
        var nav = document.getElementsByTagName('nav')[0]

        onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            if(scrollTop>=100){
                // 吸顶,给元素设置固定定位
                // className 通过这个属性添加一个类名
                nav.className = 'fd'
            }else{
                // 取消吸顶
                nav.className = ''
            }
        }
    </script>
</body>
</html>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jetpack Compose 是一种用于构建 Android UI 的现代工具包。要实现吸顶效果,可以使用 Jetpack Compose 的 ConstraintLayout 组件。 首先,在你的布局文件中引入 ConstraintLayout 组件。然后,在需要实现吸顶效果的视图组件前方放置一个占位符组件,作为吸顶效果的起点。 接下来,使用 ConstraintLayout 的 createModifier 函数来创建一个修饰符(Modifier),并将其应用到需要实现吸顶效果的视图组件上。在修饰符中,通过调用该组件的位置限制函数来设置视图组件的约束条件。 例如,使用 Modifier.offset() 函数将吸顶组件固定在布局的顶部: ```kotlin val modifier = Modifier.constrainAs(view) { top.linkTo(parent.top) } ``` 或者,使用 Modifier.padding() 函数来设置视图组件距离父布局顶部的间距: ```kotlin val modifier = Modifier.padding(top = offset) ``` 其中,offset 可以是一个动态的数值,用于实现吸顶效果的变化。你可以根据滚动位置来调整 offset 的值,实现吸顶视图随滚动而变化的效果。 最后,将该修饰符应用到你的视图组件上: ```kotlin Box( modifier = Modifier .fillMaxSize() .wrapContentSize() .offset { IntOffset(0, offset) } ) { // 吸顶视图组件 } ``` 这样,你就可以实现吸顶效果了。通过调整约束条件或距离顶部的间距,你可以自定义吸顶效果的具体表现。注意,吸顶效果通常与滚动视图组件(如 ListView 或 ScrollView)结合使用,以便根据滚动位置来动态调整吸顶视图的位置和显示状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值