今天在pc端做了一個頁面。表格形式主要是以公司產品價目做的價目單。其中有一個需求導航欄為側欄展示，根據描點定位方式展示，根據#id定位當前產品

第二個需求是導航欄在滑動頁面到一定的位置時顯示，浮動在當前位置。在剛進入頁面時不會顯示。

主要代碼是在樣式里把導航的div設置為display:none;利用position:fixed把導航浮動定位在設計好的位置。

js控制顯示或隱藏導航欄。這里主要利用jquery scroll()方法，觸發scroll函數

<script>

　　$(function(){

　　　　$(window).scroll(function{ ? ? ? ? ? ? ? ? ? ? ? ? ? ?//窗口scroll函數

　　　　　　var top = $(this).scrollTop(); ? ? ? ? ? ? ? ? ?//聲明top ?獲取當前滑動窗口頂部的距離

　　　　　　if( top>計算好的數值){ ? ? ? ? ? ? ? ? ? ? ? ? ?//判斷是否顯示

　　　　　　　　$(當前要顯示的元素).show();

　　　　　　}else{

　　　　　　　　$(當前要顯示的元素).hide();

　　　　　　　　}

　　　　})　

　　})

</script>

非常簡單的效果。主要學習了scroll()函數。只是隨筆記錄。

?

?

轉載于:https://www.cnblogs.com/chendahao/p/7875667.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的div根据滑动页面位置显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。