A-A+

侧栏跟随滚动条上下滚动的网页特效代码(转)

2017年08月25日 方法、技巧 暂无评论

经常去浏览某些网站的时候,总是看到别人网站的侧栏或者广告跟随滚动条下拉而跟随向下浮动,上拉也跟随浮动到原位置,非常羡慕!不仅好看,美观,而且能提高浏览量,今天“好妙招分享”将为各位互联网网站长分享这样一段特效JS代码!

<script type="text/javascript">

var documentHeight = 0;

var topPadding = 15;

$(function() {

var offset = $("#adsbox").offset();

documentHeight = $(document).height();

$(window).scroll(function() {

var sideBarHeight = $("#adsbox").height();

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

var newPosition = ($(window).scrollTop() - offset.top) + topPadding;

var maxPosition = documentHeight - (sideBarHeight + 368);

if (newPosition > maxPosition) {

newPosition = maxPosition;

}

$("#adsbox").stop().animate({

marginTop: newPosition

});

} else {

$("#adsbox").stop().animate({

marginTop: 0

});

};

});

});

</script>

用法说明:

1.将以上代码插入网站<head>……</head>部分,修改红色部分:#adsbox为自己的侧栏或者广告DIV标签ID即可!

2.请根据自己的需要修改,效果请看本站侧栏部分广告跟随滚动条上下浮动效果!

本文来源:http://jingyan.baidu.com/article/29697b9139c517ab21de3c58.html

标签:

给我留言

Copyright © 众人搜索网 保留所有权利.   Theme  Ality 鲁ICP备11032800号-1

用户登录 ⁄ 注册