使用JQuery的浮動div

我想要一個浮動div在內容的右側，我手邊有一個腳本，但在左側顯示div，如何通過編輯下面的腳本將div的位置向右移動。使用JQuery的浮動div

這裏是腳本..

//avoid conflict with other script 
$j=jQuery.noConflict(); 

$j(document).ready(function($) { 

//this is the floating content 
var $floatingbox = $('#floating-box'); 

if($('#body').length > 0){ 

    var bodyY = parseInt($('#body').offset().top) - 20; 
    var originalX = $floatingbox.css('margin-left'); 

    $(window).scroll(function() { 

    var scrollY = $(window).scrollTop(); 
    var isfixed = $floatingbox.css('position') == 'fixed'; 

    if($floatingbox.length > 0){ 

     //$floatingbox.html("srollY : " + scrollY + ", bodyY : " 
           //+ bodyY + ", isfixed : " + isfixed); 

     if (scrollY > bodyY && !isfixed) { 
     $floatingbox.stop().css({ 
      position: 'fixed', 
      left: '50%', 
      top: 20, 
      marginLeft: -500 
     }); 
    } else if (scrollY < bodyY && isfixed) { 
      $floatingbox.css({ 
      position: 'relative', 
      left: 0, 
      top: 0, 
      marginLeft: originalX 
    }); 
    }  
    } 
    }); 
} 
});

我很期待的答覆..

感謝保羅

來源

2010-11-03 Paul

是否有你爲什麼需要一個腳本做的一個原因？在我看來，這將直CSS聲明很容易做到：

.floatingdiv { 
    position:fixed; 
    left:0; 
    top:20px; // or whatever 
}

現在，我知道，固定定位不IE6的支持，但你至少可以使用黑客有IE6回落到位置：絕對的。有幾個建議，但我喜歡這個。以下（含星號）添加到您的樣式表您最初的樣式聲明之後的元素：

* html .floatingdiv { 
    position: absolute; 
}

你並沒有在IE6中的固定效果，但權衡的是，你得到的性能提升因爲你不需要額外的JavaScript來加載。在IE7以後的任何事情中，您也可以獲得更爲平穩的性能。

來源

2010-11-03 23:02:22 monotasker

但斯科特我認爲你沒有得到我。其實我想要一個功能像http://mashable.com/2010/11/03/facebook-deals-platform/左側的floting小部件，所以JQuery必須在該風格工作.. – Paul 2010-11-03 23:13:32

你只需要jQuery，如果你希望小部件稍微延遲其移動（在瀏覽器窗口向下滑動頁面之前滑動到頂部），就像在mashable.com上一樣。如果你願意在用戶滾動的時候讓widget移動，那麼CSS就可以做到。 – monotasker 2010-11-03 23:46:43

如果您擔心的是靈活的水平佈局，則可以將百分比的左側邊距指定爲百分比。 – monotasker 2010-11-03 23:52:22

使用JQuery的浮動div

回答

相關問題