CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;
当我滚动页面的时候,在可视区域的时候,我想让顶部的导航区域随着我页面的滚动一起滚动,但是当页面移动到一定位置的时候,如果还是使用postion:alsolute;
来进行定位的话,顶部导航就回随着我页面的移动而移动。不会将导航下面的内容移动后,就自动以position:fixed
的样子来显示顶部导航区域。
下面我放一张京东的导航图的效果,更直观的显示,我想要实现的大致操作。
注意顶部京东搜索的那个框:
想要实现的程序部分如下所示:
HTML部分:
<div id="district_navigation_switch"><div id="district_menu" class="white_box"><div class="district_select">上海</div><label href="javascript:void(0);" class="click_district" onclick="$('.district_tips').show();">择校</label> </div>
</div>
CSS部分:
#district_menu {box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);height: 50px;line-height: 50px;font-size: 16px;position: absolute;top: 0;left: 0;width: 100%;z-index: 1000;text-align: center;.district_select {background: image-url('arrow-up.png') no-repeat center right;background-size: 7px;background-position: 55px 17px;width: 70px;position: absolute;left: 0;font-size: 15px;}label {display: block;}
}
JS部分:
$(function() {$(window).scroll(function() {//获取垂直滚动的距离var scrollTop = $(document).scrollTop();if (scrollTop >= 50) {$("#district_navigation_switch").css({"top":"0","position":"fixed"});}else {$("#district_navigation_switch").css({"top":"inherit","position":"absolute"});} });});
注意:
1.scrollTop >= 50
这段功能的主要部分就是这串JS,虽然不是很难读,但是分析的过程却是很重要的,顶部的#district_navigation_switch
这个区域我是写死的高度,所以我结下来的操作就是针对这写死的高度进行实验,无非就是当顶部的导航栏检测到超出顶部的50高度时,自动的将定位的属性自动进行更改。
如果你不是写死的高度,你就需要用到自动判断滚动区域的大小距离顶部的距离,怎么计算高度呢,就需要通过scrollHeight
这种操作来计算高度值了。也可以参考我之前写过的一篇文章触摸屏幕,滚动页面内容到底部,上拉刷新显示数据,文章的底部,我放了一张屏幕的计算图,很直观易懂。
比起复杂的操作,这只是一个小例子。希望可以给你提供些灵感,如果能够帮助到你,那就是这篇文章存在的意义 ~
【更新】:更新一个功能(tabMenu 滑动到顶部固定,fixed 在顶部):
$(function() {$(window).scroll(function() {//获取 id="course_container" 元素,offsetTop是当前元素·距离网页窗口顶部的距离var offset_top = document.getElementById("course_container").offsetTop// console.log("tab距离顶部的距离:" + offset_top)//获取垂直滚动的距离(scrollTop()是从顶部开始滚动产生的距离)var scroll_top = $(document).scrollTop();// console.log("滚动的距离:" + scroll_top)if (scroll_top > offset_top) {console.log("fixed success")// 到达顶部位置,动态的添加元素属性,并给元素添加相应的元素样式document.getElementById("switch_tab").classList.add("switch_title_fixed"); } else {// 同理,把之前添加的元素移除即可document.getElementById("switch_tab").classList.remove("switch_title_fixed"); }});});
// tabMenu的html的结构
<div id="course_container"></div>
<ul className="switchTitle" id="switch_tab"><li className={this.state.activeSwitch1} onClick={this.onClickCourse}>课程介绍</li><li className={this.state.activeSwitch2} onClick={this.onClickProblem}>常见问题</li><li className={this.state.activeSwitch3} onClick={this.onClickEvalute}>用户评价</li>
</ul>
// tabMenu的scss的样式表
.switchTitle {background-color: #fff;width: 100%;height: 50px;display: flex;align-items: center;justify-content: space-around;margin-top: -7px;box-shadow: 0 1px 2px rgba(122, 36, 36, 0.1);color:#666666;.active {border-bottom: 2px solid #333333;color: #333333;height: 50px;line-height: 50px;text-align: center;}
}// 到固定位置 固定 switchTitle tab
.switch_title_fixed {animation: searchTop .5s ease-in-out;position: fixed;margin-top: 0;z-index: 100;top: 0;box-shadow: 0px 2px 1px rgba(0,0,0,.2);
}
· 这个功能应该用到的人比较多,所以整理出来。方便需要的coder参考。
· 再补充一点。在React中,虽然不赞成用户通过操作dom来实现功能。但是,在React中,在不操作DOM的情况下实现固定顶部fixed的功能是比较复杂的。获取顶部和滚动距离这个功能,建议通过操作DOM实现。
CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;相关推荐
- html+css+js实现登录页面
登录页面 上一篇为注册页面,本次为登录页面,思路相同,将全局变量作为数据库进行验证登陆,话不多说直接上代码,可直接运行 <!DOCTYPE html> <html > < ...
- 前端鼠标移入悬浮框针对页面顶部和底部的定位设置
一般情况对于鼠标移入出现悬浮框,会考虑到是在页面顶部还是底部,所以会涉及到一些代码 <div v-show="i.secStationList&&(i.secStati ...
- 叮咚,您有一封告白信件待查收(原生HTML+CSS+JS绘制表白信件,代码+链接+步骤详解)
马上就要5月20号啦,准备好如何向心仪的她/他表白了嘛!特此出一篇告白小信件,效果图如下.纯html+css绘制,包含详细教程注释,干货满满哦. 链接置于文章结尾总结处. 文章目录 一.叮咚!查收您 ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- html中如何写div中div的位置,position设置div的位置
css怎么调整div的位置 可以使用css中的position来对div进行定位来改变div的位置,position可能的值如下: 工具原料:编辑器.浏览器 通过设置一个div的position的值来 ...
- CSS / JS 实现粘性头部(滚动到一定位置后固定)
要实现的效果: 当页面滚动到一定位置时,.nav position的值变为 fixed css 实现 .nav {position: sticky;top: 0px; } 粘性定位可以被认为是相 ...
- 关于使用css3属性:transform固定菜单位置,在滑动页面时菜单闪现抖动的问题
1 myScroll = new IScroll('#h-s-wrapper', { 2 scrollX: true, 3 scrollY: true, 4 probeType: 3, 5 mouse ...
最新文章
- 2019 ICPC Asia Nanjing Regional J.Spy(KM算法O(n^3)板子题)
- 社团的CTF逆向题WriteUp
- bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了
- Jmeter与ant整合生成美观的测试报告
- 防止properties乱码配置---SpringBoot
- Java core 包_feilong-core 让Java开发更简便的工具包
- Ubuntu中用gedit保存文件失败的解决办法
- uniapp接收服务器消息,【教程】uniapp websocket实现消息推送
- Linux操作系统下三种配置环境变量的方法
- AGG第十八课 agg::trans_affine仿射变换
- adb shell am 的用法
- 异常——Python
- Leetcode 137. Single Number I/II/III
- AMD and CMD are dead之KMDjs内核之依赖分析
- c++三子棋游戏程序
- 考研没过线也能录取?13种特殊录取方式!
- TWS耳机什么值得买?入耳式蓝牙耳机排行榜10强!
- centos7安装boost记录
- 永久修改服务器bmc主机名,如何在 VMM 中配置主机 BMC 设置
- 阿铭Linux_传统IDC 部署网站学习笔记20190129
热门文章
- springboot入门笔记
- 400个可以发外链的网站
- 科技企业捐赠武汉最新最全排名(截止2月13日)
- 3399使用GPIO口模拟i2c升级NT68411
- 艾瑞报告| 中国 IoT 物联网行业研究
- 将遗传算法(GA)应用于指定的函数 f(x) = x*sin(x)+1,x∈[0, 2л],求其最大值和最小值
- 二本院校学弟大二开始实习,大三收割阿里、腾讯实习offer
- python 3.7.732位安装步骤_Python 3.7.7详细图文安装教程(附安装包) | 我爱分享网
- 云原生数据库-开务分布式数据库SST文件结构
- 朋友去华为面试,轻松拿到26K的Offer,羡慕了......