使用JQuery浮動div

Question

我想要在內容的右側有一個浮動div，我手中只有一個腳本，但在左側顯示了div，如何通過編輯以下腳本將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
    });
     }      
   }
   });
 }
});

我期待着答復。

謝謝保羅

Answer 1

您為什么需要腳本來執行此操作？ 在我看來，使用簡單的CSS聲明很容易做到：

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

現在，我知道IE6不支持固定定位，但是您至少可以使用hack來使IE6恢復到position：absolute。 周圍有一些建議，但我喜歡這個建議。 在元素的初始樣式聲明之后，將以下內容（包括星號）添加到樣式表中：

* html .floatingdiv { 
    position: absolute;
}

您無法在IE6中獲得固定的效果，但是要權衡的是，由於不需要額外的JavaScript來加載，因此可以提高性能。 從IE7開始，在任何情況下，該固定div的性能都會更加平滑。