粘性定位应用

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

思路:创建一个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')
        }
        
    });
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/814455.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于PyTorch神经网络进行温度预测——基于jupyter实现

导入环境 import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim import warnings warnings.filterwarnings("ignore") %matplotlib inline读取文件 ### 读取数据文件 features pd.read_csv(temps.…

Linux第90步_异步通知实验

“异步通知”的核心就是信号&#xff0c;由“驱动设备”主动报告给“应用程序”的。 1、添加“EXTI3.c” #include "EXTI3.h" #include <linux/gpio.h> //使能gpio_request(),gpio_free(),gpio_direction_input(), //使能gpio_direction_output(),gpio_get_v…

Java基础-知识点2(面试|学习)

Java基础-知识点2 Java为什么是单继承的equals与的区别equals的等价关系 Java 访问修饰符publicprotecteddefaultprivate Final、Static、this、superFinalStaticthissuper 深拷贝、浅拷贝浅拷贝深拷贝 引用类型有哪些&#xff1f;Java 泛型泛型类&#xff08;Generic Class&am…

有序二叉树的增删改查(源代码讲解)

有序二叉树的相关实体类 TreeNode类 二叉树结点类&#xff0c;包含三个属性&#xff1a;value&#xff0c;leftChild&#xff0c;rightChild 有序二叉树类就包括这样一个根节点 剩下的getter和setter方法&#xff0c;有参无参构造&#xff0c;toString方法都是老生长谈&…

PySide6和PyQt5的show()不仅仅是展示这么简单

看一段代码&#xff1a; import sys from PySide6.QtWidgets import QApplication, QMainWindow, QFrameclass MainWindow(QMainWindow):def __init__(self):super().__init__()# 创建主窗口self.setWindowTitle("Main Window")self.setGeometry(100, 100, 800, 600…

使用Java中的Condition+ ReentrantLock进行高效地协调线程

Condition 是 Java 中用于更细粒度的线程同步控制的一个接口&#xff0c;与传统的内置锁监视器方法&#xff08;wait(), notify(), notifyAll()&#xff09;相比&#xff0c;它提供了更高级的功能&#xff0c;允许更加灵活的线程管理。它通常与显式锁&#xff08;如 ReentrantL…

使用simulink进行汽车软件建模的经验介绍

使用Simulink进行汽车软件建模的经验介绍可以从多个方面进行阐述。首先,Simulink提供了一个强大的平台,支持车辆模型的搭建和仿真,包括但不限于商用车整车模型、自动驾驶仿真框架的构建。这表明Simulink能够满足不同自动驾驶开发任务的需求,通过选择不同的车辆、传感器模型…

Redis入门到通关之Hash命令

文章目录 ⛄介绍⛄命令⛄RedisTemplate API❄️❄️添加缓存❄️❄️设置过期时间(单独设置)❄️❄️添加一个Map集合❄️❄️提取所有的小key❄️❄️提取所有的value值❄️❄️根据key提取value值❄️❄️获取所有的键值对集合❄️❄️删除❄️❄️判断Hash中是否含有该值 ⛄…

阐述嵌入式系统的基本组成:硬件层、驱动层、操作系统层和应用层

大家好&#xff0c;今天给大家介绍阐述嵌入式系统的基本组成&#xff1a;硬件层、驱动层、操作系统层和应用层&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 嵌入式系统是一种能…

Java集合(一)--Map(2)

ConcurrentHashMap与HashTable 底层实现 在JDK1.7时&#xff0c;底层采用的是分段数组&#xff0b;链表的形式&#xff0c;在JDK1.8之后&#xff0c;采用的是与HashMap相同的形式&#xff0c;数组链表/红黑树。而HashTable采用的是数组链表的形式。 如何实现线程安全 Concu…

DeblurGANv2-master文件组成

DeblurGANv2-master文件夹 **Config&#xff1a;**config.yaml是项目的配置文件&#xff1a;包括训练集的路径设置&#xff0c;验证集路径设置&#xff0c;对数据集内图片的处理&#xff0c;数据集增强等&#xff1b;backbone的选择&#xff0c;backbone冻结的轮数&#xff1b;…

如何访问远程服务器?

在现代技术时代&#xff0c;随着信息化的快速发展&#xff0c;远程访问服务器已经成为了不可或缺的一种需求。无论是企业还是个人用户&#xff0c;都需要通过远程访问来管理、传输和获取数据。本文将介绍一种名为【天联】的工具&#xff0c;它能够通过私有通道进行远程服务器访…

vscode配置c\c++及美化

文章目录 vscode配置c\c及美化1.安装vscode2.汉化3.安装c\c插件4.安装mingw5.配置mingw6. 运行c代码6.1 创建代码目录6.2 设置文件配置6.3 创建可执行任务&#xff1a;task.json6.4 编译执行6.5 再写其他代码6.6 运行多个c文件 7. 运行c文件8.调式代码8.1 创建launch.json8.2 修…

【排序 贪心】3107. 使数组中位数等于 K 的最少操作数

算法可以发掘本质&#xff0c;如&#xff1a; 一&#xff0c;若干师傅和徒弟互有好感&#xff0c;有好感的师徒可以结对学习。师傅和徒弟都只能参加一个对子。如何让对子最多。 二&#xff0c;有无限多1X2和2X1的骨牌&#xff0c;某个棋盘若干格子坏了&#xff0c;如何在没有坏…

Springboot+Vue项目-基于Java+MySQL的母婴商城系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

TPS2041A 至 TPS2044A 、TPS2051A 至 TPS2054A

这份文件是德州仪器&#xff08;Texas Instruments&#xff09;关于一系列电流限制型电源分配开关的数据手册&#xff0c;型号包括 TPS2041A 至 TPS2044A 和 TPS2051A 至 TPS2054A。这些开关适用于可能遇到重负载电容负载和短路的应用程序。以下是该数据手册的核心内容概要&…

常用组合逻辑电路模块(5):加法器

半加器和全加器 半加器 半加&#xff1a;只考虑两个加数本身&#xff0c;不考虑低位进位的加法运算。实现半加运算的逻辑电路称为半加器。 其对应真值表为&#xff1a; 由真值表可得逻辑表达式&#xff1a; 逻辑电路和框图如下&#xff1a; 其中&#xff0c;CO为进位输出端&…

家庭网络防御系统搭建-siem之security onion 安装配置过程详解

本文介绍一下security onion的安装流程&#xff0c;将使用该工具集中管理终端EDR和网络NDR sensor产生的日志。 充当SIEM的平台有很多&#xff0c;比如可以直接使用原生的elastic以及splunk等&#xff0c;security onion的优势在于该平台能够方便的集成网络侧&#xff08;比如…

Linux 硬链接和软链接怎么区分使用?

一、什么是硬链接和软链接 硬链接 在Linux操作系统中&#xff0c;硬链接相当于存储在硬盘驱动器中的文件&#xff0c;它实际上引用或指向硬盘驱动器上的某个点。硬链接是原始文件的镜像副本。 硬链接与软链接的区别在于&#xff0c;删除原始文件不会影响硬链接&#xff0c;但…

网站如何一定程度上防止ddos和压力测试

1.通过nginx对并发数进行限制 防止压力测试的恶意攻击的思路&#xff1a;nginx限制同一个IP的并发最大为10&#xff0c;vi /usr/local/nginx/conf/nginx.conf在http{} 字段第一行添加&#xff1a;limit_conn_zone $binary_remote_addr zoneone:10m; 在对应的server{}里添加&a…