滑动吸顶 固定导航可使用粘性定位

最新推荐文章于 2023-12-27 11:17:47 发布
最新推荐文章于 2023-12-27 11:17:47 发布
阅读量77 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64962562/article/details/134113267
版权

position: sticky; 粘性定位

sticky（粘性定位）解释：

  • 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

  • 必须添加 top 、left、right、bottom 其中一个才有效

  • 父元素不能overflow:hidden或者overflow:auto属性。（会不起作用）

  • 父元素的高度不能低于sticky元素的高度

  • sticky元素仅在其父元素内生效

 使用粘性定位将页面内tab滑动后吸顶

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
 
<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>
    .contentBox {
      height: 1500px;
      width: 100%;
      background-color: #fff;
    }
    .box1 {
      background-color: pink;
      height: 100px;
    }
    .box2 {
      background-color: #ccc;
      height: 100px;
    }
    .box3 {
      height:1000px;
      background-color: skyblue;
    }
    .sticky{
      position: sticky;
      top: 0;
    }
  </style>
</head>
 
<body>
  <div class="contentBox">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">
        3
        <p class="sticky">p的头部滑到顶部被吸住</p>
        <p>p的内容</p>
        <p>p的内容</p>
        <p>0的内容</p>
    </div>
  </div>
</body>
 
</html>

效果

 

i'm wxm
关注
【HTML】CSS入门教程---基本布局定位流(相对定位+绝对定位+固定定位+粘性定位)
hnspystqxskzlqc的博客
03-25 1239
目录 一、相对定位 二、绝对定位 三、固定定位 四、粘性定位 五、总结 (接上一期知识，咱们继续讲解。) 一、相对定位 relative：可以理解为相对于自身定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ....
js滑动后吸顶实现
丁哒哒的博客
05-20 1697
效果： 法一： addEventListener监听滚动，当滚动上去的高度scrollTop 大于 吸顶部分距离页面顶部的距离offsetTop时，添加一个类，类里边用fixed布局，top设置成0；当又滚动下来，在将该类名移除即可，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl.
纯css的吸顶效果实现——使用“position:sticky”
SCUhzs
07-30 8495
文章目录一.sticky用法1.1 示例11.2 示例2二.sticky使用过程中的坑2.1 只在 Containing Block 内有效2.2 Overflow对Sticky的影响2.3.兼容问题三.应用场景3.1 表格的查看3.2 导航栏、栏目条等吸顶效果四、参考资料 一.sticky用法 使用 CSS Sticky 需要两个条件。 position: sticky; top: 0; /*top/right/bottom/left 任一有效值*/ top：0 意思是当元素滑动到距离视口 0
css吸顶(position: sticky；)
最新发布
空&白的博客
12-27 1144
解释下上面的效果：当元素tabs-s滑动到距离顶部60rpx的时候，会“固定”在那个地方，不会随着页面的向上滑动而滑动；但是向下滑动距离顶部小于60rpx的话，那元素tabs-s也会跟着向下滑动。用样式position: sticky;来做吸顶其实很简单，只要在设置一个top属性即可。
position的粘性定位
看风听雨
11-05 1105
position：sticky属性里的一些坑； antd vue Table sticky属性的使用限制；
CSS3 粘性定位实现吸顶 position: sticky
司马懿的西山居
12-29 4588
粘性定位 是 相对定位（relative）和 固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。著作权归作者所有。 它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 注意：起作用的，除了 top...
css 吸顶效果 position:sticky
輕描淡寫的博客
07-01 946
nav{ position: -webkit-sticky; // 兼容 position:sticky; top:0px; } 注意 top、bottom 的生效距离由最近一个overflow属性是hidden scroll auto或 overlay 的祖先元素决定。 父元素为overflow:hidden时，由于容器内无法滚动，所以实际上也无法生效。 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。 父元素的高度不能低于s...
vue吸顶导航
qq_42312396的博客
03-27 1895
自己边查资料边做，不过最后用的还是原生dom的方法，其实用$refs就可以了，但是反正滚动监听还是用的原生，所以也没关系了。 html导航 <div class="contain"> <div class="nav-bar-wrap"> <ul class="banner"> <li v-for="value in banner_list" :key="value" @
小程序滑动菜单栏吸顶
热门推荐
baozhuona的博客
06-28 2万+
1. 效果图 菜单正常嵌入在页面中 菜单位置滑动到距离可视窗口0px时，脱离文档流固定在页面顶部 2.常见实现方案 查询菜单栏距离文档顶部的距离menuTop 监听页面滚动距离scrollTop 当页面滚动距离scrollTop &gt; menuTop菜单栏距离文档顶部的距离时，菜单栏固定定位 &lt;view class="menu {{menuFixed...
微信小程序-导航吸顶+view锚点
Strive-luo的博客
04-11 2001
微信小程序--导航吸顶+view锚点导航栏滑动定位+view锚点效果图实现原理WXMLWXSS主页面JS-主页面JS-主页面子页面-newcontent子页面-sticky子页面-uploadfile 导航栏滑动定位+view锚点 我们在做小程序的时候，难免会遇到页面里面有很长的数据，页面下面又有到导航栏部分；用户希望页面滑动到导航栏的位置，导航栏固定在页面的最上面，同时里面的数变化，也能改变导航...
滑动吸顶position: sticky
静如雪的博客
06-09 839
在开发移动端app时，经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现 我不是最后一个知道的：position: sticky position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sti
css实现滚动吸顶之 粘性定位
youngjqz的博客
08-12 1356
css实现滚动吸顶之 粘性定位 以前做滚动吸顶都是使用 position: fixed; ,通过监听页面的滚动距离或者是吸顶元素距离top顶部的距离做计算判断是否需求吸顶，这样做影响页面性能，代码量也增多了，最近逛知乎发现一个 position 还有一个好用的 属性值用来做吸顶动效；那就是 sticky ；查了一个资料，属于新增属性值，sticky 比较有意思的就是 当给元素设置里sticky ，在屏幕的范围内，该元素不受定位的影响，当该元素的位置将要移出偏移的范围时，该元素的会变成 fixed 定位，根据
小程序的 position: sticky； 吸顶效果的使用方法
最爱喝怡宝的博客
03-30 3060
今天在使用 uniapp 编写小程序时需要使用到吸顶效果，设置如下： .head { position: sticky; top: 88rpx; z-index: 100; } 在网页上的显示效果是刚好固定在顶部显示，但是在微信开发者工具上，就距离顶部有了间隙 后面发现在小程序中，需要设置： top: 0; .head { position: sticky; top: 0; z-index: 100; } 注意事项： （1）距离顶部的吸顶距离 top:0 时才会生效； （2
css实现吸顶效果 - position：sticky
一块小砖头的博客
09-15 4905
css粘性定位position：sticky position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 #stickyBox{ position: -webkit-sticky; position: sticky;
position sticky吸顶，吸底，吸边的效果
超级小恐龙~
11-15 5504
探究 position-sticky 失效问题 CSS 的 position 值中，有一个非常有用的值 --position: sticky，通常会被用于各种吸顶，吸底，吸边的效果中。 如果你对sticky还不太熟悉，可以先看看我的这篇文章：使用 position:sticky 实现粘性布局，当然，这篇文章里面有稍微探讨position: sticky生效或者说失效的规则，但是不太充分。 最近遇到一些position-sticky失效的场景，所以总结了一下。 position-st...
position: sticky实现吸顶操作
cotexarm7的专栏
04-28 1043
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&g
css样式简单得代码实现吸顶效果（粘性定位）
fengxiaopeng74的博客
07-12 5771
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{margin: 0; padding: 0;}
css 属性 position:sticky (粘滞的) 制作导航吸顶效果
courageFei的博客
03-18 4766
一、position:sticky (粘滞的) 1.简介 是 position:relation;和 position:fixed ;的结合体. 表现为 当有一个元素设置了 position:sticky的时候，这个元素滚动到距离顶部 0 像素的时候就会自动粘滞到顶部。 当然也不一定全部是粘滞到顶部，可以依据情况设置到底部或者左边或者右边。 一般适合用于新闻资讯类，有标题的部分可以粘滞在边缘，内...
position:sticky处理导航吸顶
小D科技的博客
09-30 2492
在做手机APP开发经常遇到需要实现吸顶操作： 以前的处理方案都是用js监听滚动事件，在vue中监听了滚动事件还得去销毁。反正一般蠢。 css出现了一种新的属性处理这种问题： position{ z-index: 99; position: sticky; left: 0; right: 0; top: 0.54rem; } sticky属性特点是在该...
Android 实现悬浮导航栏：ItemDecoration吸顶效果详解
在Android开发中，悬浮导航栏（Floating Action Button）通常用于提供主要的用户操作，而吸顶效果则是一种常见的界面设计，它可以让特定元素在滚动时固定在屏幕顶部。ItemDecoration是Android RecyclerView的一个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值