jquery向下滑動指定距離右側固定懸浮指定元素

“頁面向下滑動到指定位置,元素固定懸浮在指定位置”——這個功能很常見,特别是在pc頁面中,幾乎90%的網站都有這樣的效果,那麼jquery怎麼實作呢?總結一個常用方法:

1.css代碼：

.slider-zone{position: relative;}
.rightScroll{position: fixed;z-index: 6636;right: calc((100% - 1200px)/2 -25px);top: 80px;width:300px}
           

2.html代碼：

<div class="right-scl-fixed">  
	<!--  右側懸浮的區域代碼：--> 
</div>
           

3.js代碼：

$(window).scroll(function(){
	var s_top = Number($(this).scrollTop());  // 擷取滾動條，滾動刻度
	if(s_top >= 750 ){
		$('.right-scl-fixed').addClass("rightScroll");    // 添加屬性，讓他固定
		$('.right-scl-fixed').css("top",10);
	}else{
		$('.right-scl-fixed').removeClass("rightScroll");    // 删除屬性，讓他釋放
	}
})
           

相關知識點：

position中的absolute和fixed以及relative的差別

51qux部落格原文：jquery向下滑動指定距離右側固定懸浮指定元素