粘性定位应用

已于 2024-04-13 15:56:41 修改
阅读量751 收藏 12
点赞数 9
文章标签： css javascript 前端
于 2024-04-13 15:56:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43910988/article/details/137717294
版权

现象：当页面滑动到某个位置时，图片吸顶。

思路：创建一个father背景。包含内容和需要吸顶的背景图

当滚轮运动距离大于800px时，将吸顶图的position设置为sticky，距离顶部改为0px。

html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>123</title>
    </head>
    <style>
        .back{
            background-image: url(img/b3.jpg);
            /* background-repeat: no-repeat; */
            top: 800px;
            height: 1080px;
            width: 1000px;
            position: absolute;
            
        }
        .content{
            position: absolute;
            top: 9px;
        }
        .p{
            font-size: 110px;
            color: cornflowerblue;
            border: 1px solid rebeccapurple;
        }
        .father{
            width: auto;
            height: 8000px;
            background-color: gray;
        }
    </style>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/back.js">
    </script>    
    <body>
        <div class="father">
            <div class="back">背景图</div>
            <div class="content">
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
                <div class='p'>大家好我是渣渣灰</div>
            </div>
        </div>
    </body>
    <script>
        ScrollEvent()
    </script>
</html> 

JS代码：

function ScrollEvent(){
    addEventListener("scroll", (event) => {
        const scrollX = window.scrollX;
        const scrollY = window.scrollY;
        if ( 0<=scrollY && scrollY<=800){
            //$('.back').css('background-attachment', 'scroll')
            $('.back').css('position', 'absolute')
            $('.back').css('top', '800px')
        }else if(800<scrollY){
            //$('.back').css('background-attachment', 'fixed')
            $('.back').css('position', 'sticky')
            $('.back').css('top', '0px')
        }
        
    });
}

平清盛_v2
关注
  • 9
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自由曲面数字化测量中粘性目标的设计及定位* (2005年)
05-30
自由曲面数字化测量中，由于传感器单元测量区域小，所以实现整体测量需要进行多次...根据测量图像中粘性目标的诸多相似特性，实现了粘性目标的自动粗定位并通过椭圆拟合对粘性目标进行精确定位，定位精度优于0.05像素。
粘性定位的使用
liluo_1227的博客
07-14 1483
背景：项目中需要把按钮固定在可视区域，所以采取粘性定位，如果内容较少就在内容底部，当内容过多按钮固定在屏幕下方，居中显示 之前想过用固定定位但是发现数据少的时候按钮在下面很怪，而且当我父盒子宽度改变时按钮并不会变化，原本的居中就歪了，后面发现粘性定位加盒子可以完美解决问题 方法：封装了一个粘性定位组件，是一个盒子，里面可以放需要定位的按钮或者文字，然后给盒子粘性定位，这样的好处是盒子宽度直接100%，内容设置居中，不管父元素宽度怎么变化都不影响 组件（组件是公司大佬写好的）： <templa
position:sticky 粘性定位
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
CSS 绝对定位问题和粘性定位介绍
qq_40147756的博客
12-02 1121
CSS 绝对定位问题和粘性定位介绍
css的定位属性——固定定位和粘性定位
weixin_46579411的博客
03-30 3499
一、固定定位 position:fixed; 【固定定位】 a: 参照物：浏览器窗口。 b: 不占据空间，脱离布局流。 （注：如果块状元素没有设置宽度的时候，添加position:absolute 或position:fixed会出现宽度被内容撑开） 让一个元素在浏览器窗口左右上下居中？ 第一种方法： position:fixed; left:50%;top:50%; margin-left:-...
position:sticky粘性定位的几种巧妙应用与理解。
热门推荐
小祥编程擅长前端
09-14 2万+
position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。粘性定位可以被认为是相对定位和固定定位的混合元素在跨越特定位偏移之前为相对定位，之后为固定定位。top: 50px;}设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于50px之前，div为相对定位。之后元素将固定在与顶部距离50px的位置，直到viewport视口回滚到50px以内。
粘性定位——position: sticky
weixin_48796690的博客
10-09 344
粘性定位（不脱离文档流）——position: sticky
CSS固定定位与粘性定位4大企业级案例
艾编程带你学前端博客
12-11 605
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。属性值描述relative 相对定位相对于自身正常位置进行位置的调整absolute 绝对定位相对于其最近的定位的父元素进行位置调整。fixed 固定定位相对于浏览器窗口进行位置调整sticky 粘性定位是基于用户的滚动位置来定位。固定定位相对于浏览器窗口进行定位，其它与绝对定位的特性一致。
彻底理解粘性定位（position：sticky）
weixin_57585624的博客
09-05 9046
粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如： .div{ position: sticky; top: 10px; } 在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下 一、应用场景： 1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上 2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体.
CSS 定位 - 静态 绝对 相对 固定 粘性定位
qq_44243059的博客
02-27 369
CSS 定位 定位 1.1 为什么需要定位 提问： 以下情况使用标准流或者浮动能实现吗？ 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子. 提问： 以下情况使用标准流或者浮动能实现吗？ 当我们滚动窗口的时候，盒子是固定屏幕某个位置的。 以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。 所以： 浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 1.2 定位组成 定位：
CSS 3.0粘性定位的妙用
越陌度阡
06-04 383
position:sticky是 CSS 3.0新增的定位属性，可以说是相对定位relative和固定定位fixed的结合，它主要用在对scroll事件的监听上，简单来说，在滚动过程中，元素距离其父元素的距离达到sticky粘性定位的要求时，效果会变成fixed定位，固定到适当位置，下面给大家看一个效果。 这个属性用的概率比较小，不过在特定的场合，它真是个好东西，不用写那么复杂的JS，以下是代码实现。 <!DOCTYPE html> <html lang="en"> &l
Python鼠标屏幕坐标定位函数
07-10
内容并不涉及高深的数学知识和智力算法，都是简单实用的函数和代码字段，充分展示了Python语言的粘性特征，可以复制粘贴到各种合适的应用场景。 所有付费资源，作者承诺将50%的收入拿出作为慈善基金，捐献给权威慈善...
vue2-kfc:仿kfc宅急送移动端单页面应用
05-13
1.vue的粘性定位实现 2.根据滚动位置动态更改透明度 3.购物车小球抛物线动效 4.better-scroll双滚动列表的联动 5.遇到的一些坑以及未解决的问题 技术栈 vue2.x全家桶+axios+vue-awesome-swiper+better-scroll+lodash...
flutter_sticky_infinite_list:带有Flutter应用程序的Sticky标头的多向无限列表
04-29
支持各种页眉定位。 还支持垂直和水平滚动列表它具有高度可定制性，没有任何第三方依赖项或本机（Android / iOS）代码。 除了默认用法外，此程序包还公开了一些类，如果需要，可以将其覆盖。 还有一些类可以在...
ember-sliding-sticky:一个位置
04-28
默认情况下，使用transform: translate3d(0, Npx, 0)定位粘性元素。 优点很好用。 正确且自然地使用比视口高的粘性元素工作。 适用于窗口滚动和自定义元素滚动。 与position: sticky不同position: sticky ，在具有...
css响应式布局左、右上、右中布局
fengchengwu2012的博客
05-03 280
【代码】css响应式布局左、右上、右中布局。
前端科举八股文-CSS篇
星海拾遗
04-25 1660
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
vue3+arco design通过动态表单方式实现自定义筛选
最新发布
m0_72167535的博客
05-07 387
vue3+arco design通过动态表单方式实现自定义筛选
基于Springboot的家具网站
趙兴晨的博客
05-03 544
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
CSS粘性定位怎么使用
07-12
1. 首先，在CSS中选中要应用粘性定位的元素。可以使用类名、ID或标签名来选中元素。 2. 接下来，使用position属性设置元素的定位方式为sticky（粘性）。例如： ``` .sticky-element { position: sticky; top: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值