css效果之吸顶效果

这篇具有很好参考价值的文章主要介绍了css效果之吸顶效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用定位实现

  1. 一般我们使用position:sticky来进行实现
  2. 他相当于relativefixed相结合
    • 在页面滚动过程中,含有粘性定位的元素到父元素的距离达到一定要求的时候,他的属性就会由relative变为fixed
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            overflow: auto;
        }
        #header{
            height: 100px;
            position:sticky;
            top: 0;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header">
            固定的头部
        </div>
        <div id="inner">
            你好 <br>
            ...
        </div>
    </div>
</body>

请多写几行 你好 <br>然后,运行demo,我们会发现头部固定了css效果之吸顶效果

缺点

  1. 当前代码的兼容性不太好
  2. 不会触发BFC 点击
  3. 样式表 zindex 无效。行内 style 写有效。

获取DOM位置实现

他的核心是当达到一定的条件后,将盒子的定位属性改为fixed文章来源地址https://www.toymoban.com/news/detail-469148.html

条件

  1. 滚动的元素和固定的元素之间的差值为0的时候

步骤

  1. 我们可以使用offsetTop这个属性来进行获取相关的位置,他是用来获取相对于父级定位的偏移量的属性,关于offsetTop这个属性,点击
  2. 监听滚动事件,每一次滚动获取滚动条滚动的距离,关于scrollTop 点击
  3. 滚动的距离与偏移的距离作对比,如果滚动的距离大于等于偏移的距离,那么直接设置吸顶盒子的属性为fixed

代码

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            overflow: auto;
            position: relative;
        }

        #header {
            height: 100px;
            background-color: red;
            width: inherit;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="header">
            固定的头部
        </div>
        <div id="inner">
            你好 <br>
            ...
        </div>
    </div>
    <script>
        // 选中要吸顶的盒子
        const headerEle = document.getElementById("header")
        // 获取盒子的距离
        const _headerTop = headerEle.offsetTop
        const _container = document.getElementById("container")
        // 监听事件
        _container.onscroll = () => {
            const _scrollTop = _container.scrollTop
            console.log(_scrollTop, _headerTop)
            // 距离比较
            if (_scrollTop >= _headerTop) {
                headerEle.style.position = "fixed"
                headerEle.style.top = 0
                headerEle.style.left = 0
            }
        }
    </script>
</body>

到了这里,关于css效果之吸顶效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS中position: fixed定位后div中内容不能滚动

    问题描述 div 设置定位后,内容不能滚动。 解决方案

    2024年02月06日
    浏览(33)
  • vue中怎么实现吸顶效果

    在 web 应用中,我们经常需要让页面中的一个或多个元素在页面滚动时保持固定位置。这种效果通常被称为吸顶效果,因为它使元素像粘在页面顶部一样固定不动。 在 Vue 中,实现吸顶效果有不同的方法。本文将介绍其中一种方法,并提供示例代码。 方法 在 Vue 中实现吸顶效

    2024年02月01日
    浏览(35)
  • 微信小程序搜索框吸顶效果实现

    主页要做一个搜索框,滑动主页页面的时候,搜索框始终位于导航栏下面,位置不变,不随页面的滑动而滑动,这种效果被称为”吸顶“效果。 点击搜索框,弹出上层搜索详情的视图层,搜索详情的整个页面覆盖在主页面之上,并且也覆盖住主要搜索框。 主页搜搜框设置

    2024年02月13日
    浏览(60)
  • uniapp小程序利用transition实现吸顶效果

     需要利用scroll-view监听页面滚动距离(注意,需要添加:throttle=\\\"false\\\"关闭内置的节流阀) scrollTop监听页面滚动变化 然后利用官网的transition组件实现吸顶效果(选用淡入淡出) (zero-custom-bar、v-tab是第三方插件库,可以去插件市场搜索。Topbar是我自己封装的一个自定义组件,可以

    2024年02月08日
    浏览(47)
  • 微信小程序第六篇:元素吸顶效果实现

     系列文章传送门: 微信小程序第一篇:自定义组件详解 微信小程序第二篇:七种主流通信方法详解 微信小程序第三篇:获取页面节点信息 微信小程序第四篇:生成图片并保存到手机相册 微信小程序第五篇:页面弹出效果及共享元素动画 话不多说,先看效果: 这种效果在

    2024年02月16日
    浏览(43)
  • Android CoordinatorLayout+AppBarLayout顶部栏吸顶效果的实现

    1.控件简介。 CoordinatorLayout遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。     作为最上层的View     作为一个容器与一个或者多个子View进行交互     CoordinatorLayout is intended for two primary use cases: As a top-level a

    2024年02月04日
    浏览(38)
  • 【CSS 08】display 控制布局 块级元素 行内元素 隐藏元素 结合JS 最大宽度 浏览器窗口 定位 position z-index 堆叠

    说在前面 CSS基础教程系列已经结束,接下来就是中级教程,让我们跟上脚步,继续努力吧! 并且最近临近期末考试,后面十天休刊… display display 属性是用于控制布局的最重要的 CSS 属性 display 属性规定是否/如何显示元素 隐藏元素 - display:none 还是 visibility:hidden 通过将 disp

    2024年02月08日
    浏览(59)
  • Android应用-flutter使用Positioned将控件定位到底部中间

    要将Positioned定位到屏幕底部中间的位置,你可以使用MediaQuery来获取屏幕的高度,然后设置Positioned的bottom属性和left或right属性,一般我们left和right都会设置一个值让控制置于合适的位置,那么如何使其位于底部中央? 以下是一个示例代码: 在这个例子中,Positioned包含一个具

    2024年02月03日
    浏览(49)
  • 使用css实现边框流动效果

    要实现一个边框流动的效果,可以使用CSS动画来实现。在HTML中,我们需要创建一个元素(例如div),并将其设置为具有一定宽度和高度的盒子。然后,我们可以使用CSS来定义该元素的边框样式、位置和动画。 首先,我们需要在CSS中定义我们的元素。我们可以设置该元素的宽

    2024年02月09日
    浏览(47)
  • 【原生小程序小程序开发中,块内容使用position绝对定位之后 不显示】

    原来写法 解决:在map外面包一层以及整体在外面包一层+定位修改为static+z-index

    2024年03月10日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包