コンテンツによって、float、fixedされたfloating banners[js]

このfloating bannersは、それらが、「float」（position:fixed）状態にあるのでそれらのカラムに他の内容が全然ない時に使われます。

デモページ①

デモページ②

デモページの右側を注目していてください。

XHTML

<div class="mainWrap">
    <div class="leftWrap">contents</div>
    <div class="rightWrap">
    <div class="banner">banner</div>
    <div class="smartBannerIdentifier"></div>
    </div>
</div>

CSS

.mainWrap {
    width: 500px;
    margin: 0 auto;
}
.leftWrap {
    float: left;
    width: 250px;
    background-color: #CCCCCC;
}
.rightWrap {
    float: right;
    width: 250px;
    background-color:#666666;
}
.banner {
    width: 250px;
    background-color: #FF0000;
}

JavaScript

$(document).ready(function(){
  $(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "fixed");
      $("#banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "relative");
      $(".banner").css("top", $(".smartBannerIdentifier").offset);
    }
   });
});

これには、jQueryが必要です。

jquery-1.2.6.min.jsより取得してください。