網頁塊級元素懸停效果的實作原理

1.什麼是懸停

當推薦位DIV自出現在視野中後，始終懸浮停留在相對浏覽器固定的某一位置，使該推薦位裡的内容一直在視野中。

2 執行個體

http://t.dianping.com/deal/10752942

3 jQuery代碼

$(document).ready(function(){
    var target = $('你想懸停的div');
    var positionTop = target.position().top; // 計算target距離文檔原點的高度，是以target的父元素最好沒有potision屬性
    var positionLeft = target.position().left;
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop >= positionTop)
        {
            target.css({position:'fixed',left:positionLeft,top:0}); // 當滾動距離大于positionTop時，将target的position改為fixed
        }
        else
        {
　　　　　　　target.css({position:'static',left:positionLeft,top:positionTop}); // 當滾動距離小于postioinTop時，将target的position改為static
        }
    });
});       

4 總結

上述代碼隻是我逆向反推的，我暫時也沒找到國外優秀的類似jQuery插件。歡迎大家推薦類似的插件給大家。