国产视频app 今天在寫一個主題時,需要讓頁面的側欄在指定的DIV元素范圍內跟隨瀏覽器進行浮動,具體要實現的效果,可在pc端查看本頁面的右則部份,在頁面的不斷上下滾動的情況下,右則的則欄則始終會在瀏覽器的可視范圍內,并不會超出遮擋其它的DIV元素,而這個效果的實現,需要用到一個叫“theia-sticky-sidebar.js” js文件。

theia-sticky-sidebar.js 實現的效果如下

js 實現側邊欄跟隨固定范圍內浮動的效果

滑動展示效果(可以GITHUB下載包中查看源代碼)

theia-sticky-sidebar.js 文件關于側邊欄跟隨滾動的實現方法

国产视频app html元素代碼:

<div class="wrapper">
    <div class="content">
        我是不動的元素,高度要大于要動的元素
    </div>
    <div class="sidebar">
        我是我動的元素
    </div>
</div>

js代碼:

<!--引入JQ文件-->
<script type="text/javascript" src="jquery.min.js"></script>
<!--引入所需要的JS文件-->
<script type="text/javascript" src="theia-sticky-sidebar.js"></script>
<script type="text/javascript">
    //JS代碼
    jQuery(document).ready(function() {
        //綁定要滑動固定的元素,可以是 class 或 id
        jQuery('.sidebar').theiaStickySidebar({
            additionalMarginTop: 30
        });
    });
</script>

theia-sticky-sidebar.js 文件所要用到的參數

containerSelector:側邊欄的父容器元素。如果沒有指定直接使用側邊欄的父元素。

additionalMarginTop:可選值。指定側邊欄的頂部margin值,單位像素,默認為0像素。

国产视频app additionalMarginBottom:可選值。指定側邊欄的底部margin值,單位像素,默認為0像素。

updateSidebarHeight:是否更新側邊欄的高度。默認為true。

minWidth:如果側邊欄的寬度小于這個值,將恢復為正常尺寸。默認值為0。(該選項用于響應式設計)

defaultPosition:側邊欄必須是非static的定位方式。默認為relative定位方式。

namespace:綁定事件的命名空間。默認為TSS。

theia-sticky-sidebar.js 文件下載

theia-sticky-sidebar.js 文件下載平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 11 KB MB