ToB企服应用市场:ToB评测及商务社交产业平台

标题: 页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例 [打印本页]

---

作者: 立山    时间: 2025-1-11 09:51
标题: 页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例
页面滚动下拉时,元素变为fixed浮动js代码 以视频示例

1. <style>
2.         video{width:100%;height:auto}
3.          .div2,#float1{position:fixed;_position:absolute;
4.     top:45px;right:0; z-index:250;}
5.   button{float:right;display:block;margin:5px}
6. </style>
7. <section id="about-page">
8.     <div id="float1"style="margin:0 auto;display:none">
9.         <button onclick="showVideo()">显示视频</button>
10.         </div>        
11.   <div id="float2"style="margin:0 auto;background:#000;">
12.   <video id="myVideo" src="视频地址" controls autoplay></video>
13. <button onclick="pauseVideo()">关闭视频</button>
14. </div>           
15. 其它文章内容
16. </section>
18. <script>
19. //关闭开启视频
20. function pauseVideo() {
21.   var video = document.getElementById("myVideo");
22.   video.pause();
23.   $('#float2').stop().fadeOut();
24.   $('#float1').show();
25. }
26. function showVideo() {
27.   var video = document.getElementById("myVideo");
28.   video.play();
29.    $('#float2').show();
30.   $('#float1').stop().fadeOut();
31. }
32. //         滚动
33.           (function(){
34. var oDiv=document.getElementById("float2");
35. //alert(document.getElementById("my-left-div").offsetWidth);
36. var H=0,iE6;
37. var Y=oDiv;
38. while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
39. iE6=window.ActiveXObject&&!window.XMLHttpRequest;
40. if(!iE6){
41. window.onscroll=function()
42. {
43. var s=document.body.scrollTop||document.documentElement.scrollTop;
44. if(s>H){oDiv.className="div1 div2";
45. if(iE6){oDiv.style.top=(s-H)+"px";}}
46. else{oDiv.className="div1";
47. }
48. };
49. }
50. })();
51. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4