CSS元素滚动吸顶的简单实现方式

简介: CSS元素滚动吸顶的简单实现方式

元素滚动吸顶是很常见的一种页面形式

比方说导航条,在你滚动页面时,导航条到达页面顶部后,将一直显示在页面顶部,不随滚动而滚动,

当你下拉后,又会恢复原来的位置。

讲一种比较简单的实现方式,其他的方式 我后续再做讲解。

<!DOCTYPE html><html><head><metacharset="utf-8"><title>吸顶测试</title><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><p>如果你点我,我就会消失。</p><p>继续点我!</p><p>接着点我!</p><divid="myDiv"style="border:1px solid red;">我是吸顶的div</div><divstyle="height:1000px;"></div></body><script>varheaddiv=document.getElementById("myDiv");
varnTop=headdiv.offsetTop;
$(window).scroll(function() {
letscrollTop=$(this).scrollTop();
if(scrollTop>=nTop){
headdiv.style.position="fixed";
headdiv.style.top="0px";
headdiv.style.zIndex="2";
    }else{
headdiv.style.position="relative";
    }
  });
</script></html>
目录
相关文章
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
2月前
|
前端开发 JavaScript 开发者
CSS隐藏元素的N种方法,你知道哪一种最适合你?
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
3月前
|
前端开发 小程序
CSS元素居中大全
CSS元素居中大全
|
4月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
31 0
|
8天前
|
XML 前端开发 数据格式
css元素
【4月更文挑战第20天】css元素
16 4
|
11天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
N..
|
1月前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
1月前
|
前端开发 UED 容器
CSS3美化网页元素
CSS3美化网页元素
10 0
|
1月前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素
|
2月前
|
Web App开发 存储 前端开发
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解
【JavaEE初阶】 CSS相关属性,元素显示模式,盒模型,弹性布局,Chrome 调试工具||相关讲解