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




為了提高廣告曝光時間,拉里最近花了點時間研究在使用者瀏覽頁面時將側欄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按鈕來支持這篇文章,若有其他更有趣的方法也請不吝留言指教。

技術提供:Blogger.