當我滾動頁面的時候,在可視區域的時候,我想讓頂部的導航區域隨着我頁面的滾動一起滾動,但是當頁面移動到一定位置的時候,如果還是使用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實現。