页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

embedded/2025/1/13 4:51:56/

页面滚动下拉时,元素变为fixed浮动js代码 以视频示例
在这里插入图片描述

javascript"><style>video{width:100%;height:auto}.div2,#float1{position:fixed;_position:absolute;top:45px;right:0; z-index:250;}button{float:right;display:block;margin:5px}
</style><section id="about-page"><div id="float1"style="margin:0 auto;display:none"><button onclick="showVideo()">显示视频</button></div> 	<div id="float2"style="margin:0 auto;background:#000;"><video id="myVideo" src="视频地址" controls autoplay></video><button onclick="pauseVideo()">关闭视频</button>
</div> 	   
其它文章内容
</section><script>
//关闭开启视频
function pauseVideo() {var video = document.getElementById("myVideo");video.pause();$('#float2').stop().fadeOut();$('#float1').show();
}
function showVideo() {var video = document.getElementById("myVideo");video.play();$('#float2').show();$('#float1').stop().fadeOut();
}//	 滚动(function(){
var oDiv=document.getElementById("float2");
//alert(document.getElementById("my-left-div").offsetWidth);
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";
if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";
}
};
}
})();
</script>

http://www.ppmy.cn/embedded/153460.html

相关文章

Java阶段四04

第4章-第4节 一、知识点 CSRF、token、JWT 二、目标 理解什么是CSRF攻击以及如何防范 理解什么是token 理解什么是JWT 理解session验证和JWT验证的区别 学会使用JWT 三、内容分析 重点 理解什么是CSRF攻击以及如何防范 理解什么是token 理解什么是JWT 理解session验…

docker-compose安装canal并利用rabbitmq同步多个mysql数据

必看&#xff1a;本文默认已经安装好了docker-compose、rabbitmq、mysql并且mysql开启了binlog日志&#xff0c;不需要再安装&#xff1b; 流程图 如上图所示&#xff0c;左边是MQ模式流程图&#xff0c;右边则是TCP模式的流程图&#xff1b; 最终的目的是利用canal监听多个M…

Pulsar客户端如何控制内存使用

Pulsar客户端如何控制内存使用 一、使用场景 在实际应用中&#xff0c;Pulsar客户端的内存使用控制是一个重要的性能优化点。假设有一个搜索类业务需要记录用户搜索请求&#xff0c;以便后续分析搜索热点和优化搜索效果。以下是一个简化的代码示例&#xff1a; PulsarClient…

Unity 3D游戏开发从入门进阶到高级

本文精心整理了Unity3D游戏开发相关的学习资料&#xff0c;涵盖入门、进阶、性能优化、面试和书籍等多个维度&#xff0c;旨在为Unity开发者提供全方位、高含金量的学习指南.欢迎收藏。 学习社区 Unity3D开发者 这是一个专注于Unity引擎的开发者社区&#xff0c;汇聚了众多Un…

mysql根据表的统计信息核算一下表成本

show table status like ‘表名’; eg: show table status like ‘domain’; 在InnoDB引擎下&#xff0c;rows 是估计值。 rows&#xff1a;就是表里的记录数 data_length: 就是表的聚簇索引的字节数大小&#xff0c;此时用data_length 除以 1024 就是kb 为单位的大小&#xf…

Linux 中断下半部,软中断、tasklet 和工作队列

中断下半部概述&#xff1a;中断处理程序分上下两部分&#xff0c;上半部在关闭中断下执行时间敏感、与硬件相关且不能被打断的工作&#xff1b;下半部在开启中断下执行&#xff0c;可被打断&#xff0c;包括软中断、tasklet 和工作队列三种&#xff0c;用于处理相对耗时任务&a…

当Elasticsearch索引数据量过多时,可以采取以下措施进行优化和部署

调整索引分片数量&#xff1a;根据数据量和集群规模&#xff0c;重新分配索引的分片数量。较小的索引分片可以提高查询性能&#xff0c;但过多的分片也会增加管理开销。因此&#xff0c;需要根据具体情况进行权衡。调整副本数量&#xff1a;根据数据量和查询负载&#xff0c;适…

如何配置 CentOS 7 的 Yum 源并切换到国内镜像源

在使用 Linux 系统&#xff08;特别是 CentOS 或 RHEL 系列操作系统&#xff09;时&#xff0c;Yum 是一个非常常用的包管理工具&#xff0c;它能够方便地帮助我们安装、更新和删除软件包。通常&#xff0c;Yum 会连接到默认的官方镜像源下载软件包&#xff0c;但由于海外镜像的…