当我滚动页面的时候,在可视区域的时候,我想让顶部的导航区域随着我页面的滚动一起滚动,但是当页面移动到一定位置的时候,如果还是使用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实现。