JQuery实现网页右侧随动广告特效

方法一：

<script type="text/javascript">// <![CDATA[

$.fn.smartFloat = function() {

var position = function(element) {

var top = element.position().top, pos = element.css("position");

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

if (scrolls > top) {

if (window.XMLHttpRequest) {

element.css({

position: "fixed",

top: "10px"

});

} else {

element.css({

top: scrolls

});

}

}else {

element.css({

position: pos,

top: top

});

}

});

};

return $(this).each(function() {

position($(this));

});

};

//绑定

$("#float").smartFloat();

// ]]></script>

方法二：

/*页面智能层浮动*/

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

var $sidebar = $(".float"),

$window = $(window),

offset = $sidebar.offset(),

topPadding = 20;

$window.scroll(function() {

if ($window.scrollTop() > offset.top) {

$sidebar.stop().animate({

marginTop: $window.scrollTop() - offset.top + topPadding

});

} else {

$sidebar.stop().animate({

marginTop: 0

});

}

});

});

HTML

<div id="float" class="float">

<h3>推荐</h3>

广告代码

</div>

以上2种方法都可以实现页面右侧的随动广告特效，希望对大家能够有所帮助。