《JS語法》固定側欄位置/讓廣告在畫面捲動時保持置頂之語法詳解

rodiyer.idv.tw 拉里拉雜

為了提高廣告曝光時間，拉里最近花了點時間研究在使用者瀏覽頁面時將側欄Widget或廣告置頂的作法，初步找到兩個簡單的方法，提供給需要的網友參考：

方法一

用position:fixed語法來將廣告固定，優點是語法單純，缺點是只能針對側欄最下面廣告來緊黏螢幕滑動，否則會產生側欄跳動的問題。
另外此用法只能調整子框架位置，所以要在html欄位中需要另外設定div指定id作為CSS的設定目標。

下列語法中，HTML1是廣告語法所在的位置，html-s是HTML1中的div，sidebar-right-1是整個側欄的id，請參考下列語法：

<script>
$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var adscrtop=$("#HTML1&").offset().top;                        
var maxposition = $(document).height() - $("#sidebar-right-1").height()-570;
if(window.innerWidth&gt;860){
if(scrollVal&gt;adscrtop+10){
$(&quot;#html-s&quot;).css({"position":"fixed","top":"10px"});    
}else{
$(&quot;#html-s&quot;).css({"position":"static"});
}
}else{
$(&quot;#html-s&quot;).css({"position":"static"});
}
});
});
</script>

說明：

1. scrollVal：當前畫面捲動的位置。
2. adscrtop：指的是id為HTML1之物件上緣所在位置。
3. maxposition：廣告隨畫面捲動的最終位置，範例中的"570"視實際版面配置調整，數值之調整以廣告窗格不超過footer為原則。
4. 只要視窗寬度大於860，且捲動位置scrollVal超過adscrtop+10，則將id為html-s的廣告物件css之position屬性改為"fixed"以固定窗格，反之將position改為"static"。
5. 由於物件的position屬性改變會導致側欄中的其他物件位置隨之調整，而可能產生側欄跳動的現象，故本語法適用廣告物件位於側欄最末端之情形。

方法二 

在頁面捲動同時以動畫方式同步滾動整個側欄，廣告適用在側欄任何位置。
可以指定從哪個物件位置開始側欄緊黏頁面，也可設定最終滾動高度。

這個方法也是目前筆者所使用的方法，語法中sidebar-right-1是側欄的id，在定義offset時也可以將sidebar-right-1改成廣告欄位的id，語法中的570會影響側欄滾動的底部範圍，可以依照版型填入需要的數字，語法如下：

<script>
var documentHeight = 0;
var topPadding = 15;
$(function() {
var offset = $("#sidebar-right-1").offset();  
documentHeight = $(document).height();
$(window).scroll(function() {      
var sideBarHeight = $("#sidebar-right-1").height();  
if ($(window).scrollTop() &gt; offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight + 570);
if (newPosition > maxPosition) {
newPosition = maxPosition;}
$("#sidebar-right-1").stop().animate({
marginTop: newPosition
});
} else {
$("#sidebar-right-1").stop().animate({
marginTop: 0});      
};  
});
});
</script>

說明：

1. documentHeight：頁面總高度。
2. sideBarHeight：側欄高度，側欄的id「sidebar-right-1」請自行設定。
3. newPosition：側欄的新位置。
4. maxPosition：側欄的最終位置，範例中的"570"視實際版面配置調整，數值之調整以廣告窗格不超過footer為原則。
5. 本語法只要捲動的位置超過側欄sidebar-right-1，側欄就會用動畫animate方式追隨捲動距離，範例中的offset內可以將側欄之id改為任何廣告或是物件id，來達成廣告隨頁面捲動之目的。

以上兩個是頁面捲動時可以隨之調整側欄或廣告位置的作法，透過相關語法可以提高特定廣告欄位的曝光時間，以達到提高廣告收益之目的，如果這篇文章對您有幫助，歡迎按下底下LIKE按鈕來支持這篇文章，若有其他更有趣的方法也請不吝留言指教。

rodiyer.idv.tw 拉里拉雜