蓝狮官网侧栏实现板块悬浮

网页中通常是左右布局,但是我们不能保证左右两边的内容总是差不多高,经常会看到左边布局还有好长的内容,右边布局的内容却早已没有了,这样右边就空出来,蓝狮注册登陆影响整体的美观,所以今天要把这个问题解决掉。

于是到网上搜:

一、固定版

//侧栏随动
var rollStart = $(‘.feed-mail’), //滚动到此区块的时候开始随动
rollSet = $(‘.search,.weibo,.tags’); //添加rollStart之前的随动区块
rollStart.before(‘’);
var offset = rollStart.offset(),
objWindow = $(window),
rollBox = rollStart.prev();
objWindow.scroll(function() {
if (objWindow.scrollTop() > offset.top){
if(rollBox.html(null)){
rollSet.clone().prependTo(‘.rollbox’);
}
rollBox.show().stop().animate({top:0,paddingTop:15},400);
} else {
rollBox.hide().stop().animate({top:0},400);
}
});
可以再加上上一篇文章中讲到的制作“浮窗”的方法,蓝狮官网给.rollbox定义成”浮窗”形式

二、滚动版

//侧栏随动
var rollStart = $(‘.feed-mail’), //滚动到此区块的时候开始随动
rollOut = $(‘.ad’); //隐藏rollStart之后的区块
rollSet = $(‘.search,.weibo,.tags’); //添加rollStart之前的随动区块
rollStart.before(‘’);
var offset = rollStart.offset(),
objWindow = $(window),
rollBox = rollStart.prev();
objWindow.scroll(function() {
if (objWindow.scrollTop() > offset.top){
if(rollBox.html(null)){
rollSet.clone().prependTo(‘.rollbox’);
}
rollOut.fadeOut(‘slow’);
rollBox.show().stop().animate({marginTop: objWindow.scrollTop() – offset.top + 20},400);
} else {
rollOut.fadeIn(‘slow’);
rollBox.hide().stop().animate({marginTop:0},400);
}
});
这个方法也一样,优点是加上了隐藏rollStart之后的区块

标签:悬浮

0 Comments
Leave a Reply