开发者

Floating div using JQuery

开发者 https://www.devze.com 2023-01-23 04:18 出处:网络
I want a floating div to the right side of the content, I have one script in my hand but shows the div in left side, how to chnage the div position to right by editing the following script.

I want a floating div to the right side of the content, I have one script in my hand but shows the div in left side, how to chnage the div position to right by editing the following script.

here is the script..

//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%',
    开发者_Go百科      top: 20,
          marginLeft: -500
        });
    } else if ( scrollY < bodyY && isfixed ) {
          $floatingbox.css({
          position: 'relative',
          left: 0,
          top: 0,
          marginLeft: originalX
    });
     }      
   }
   });
 }
});

I'm looking forward to the replies..

Thanks Paul


Is there a reason why you need a script to do this? It seems to me that it would be easily done with straight CSS declarations:

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

Now, I know that fixed positioning isn't supported in IE6, but you can at least use a hack to have IE6 fall back to position:absolute. There are several suggestions around, but I like this one. Add the following (including the asterisk) to your stylesheet after your initial style declaration for the element:

* html .floatingdiv { 
    position: absolute;
}

You don't get the fixed effect in IE6, but the trade-off is that you get a performance boost because you don't need the extra javascript to load. In anything since IE7 you also get a smoother performance for that fixed div.

0

精彩评论

暂无评论...
验证码 换一张
取 消