收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

jquery跟年夜屏幕滚动代码

2012-07-24 15:21 来源: 卓杰科技 www.zhuojie.cc [ ]

我们在良多网站看到,当我们滚动网页时,网页内的广告或某个小区域并不会消逝踪,而是浮动在屏幕的某个处所,出格是一些局域广告。那么这是怎么实现的呢?本文将引用乌徒帮的跟年夜屏幕滚动代码,对此效不美观做详解。


$('aside#catalogue').css({'position':'fixed','top':'0'});

下面是乌徒帮的跟年夜屏幕滚动代码,它的浸染域为网页两侧的边栏,以及双击屏幕后的右侧潜匿栏。

var $catalogueOffsetTop = $('aside#catalogue').offset().top;
var $archiveOffestTop = $('aside#archive').offset().top;
var $archiveOffestLeft = $('aside#archive').offset().left;
$(window).bind('scroll resize',function(){
// #right-area的跟年夜屏幕滚动效不美观
if($('#right-area').height() <= $(window).height()){
$('#right-area').stop(true,true).animate({'top': $(document).scrollTop() + 'px'},800);
}else if($('#right-area').height() > $(window).height() && $('#right-area').height() < $(document).height()){
if($(window).width() > 1024)$('#main').css({'padding-left':'0'});
// 这段规模内是最关头的,许可滑动
if(($(document).scrollTop() + $(window).height()) <= $('#right-area').height()){
}else{
}else if(($(document).scrollTop() + $(window).height()) < $(document).height()){
$right_top = $(document).height() - $('#right-area').height();

一、原始代码


$('#right-area').stop(true,true).css({'top': $right_top + 'px'});
}
$right_top = $(document).scrollTop() + $(window).height() - $('#right-area').height();
}else{
}else if($('#right-area').height() >= $(document).height()){
$('#right-area').height($(document).height()).stop(true,true).css({'overflow':'hidden','overflow-y':'scroll'});
if($(document).scrollLeft() == 0){ // 只有在屏幕处于左侧的时辰才进行下面的跟年夜滚动,同时需要注重下面的if($(window).width() > 1024),是为了防止在小屏幕下还发生这种转变

之所以要将本站的代码拿出来讲解,是因为网上的代码没有具体剖析,良多问题都没有考虑到。


if($('aside#catalogue').outerHeight() < $(window).height()){
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
if($(document).scrollTop() <= $catalogueOffsetTop){
$('#right-area').stop(true,true).css('top','0');
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
}else{
$('#right-area').stop(true,true).animate({'top': $right_top + 'px'},800);
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}
if($(window).width() > 1024)$('#main').css({'padding-left':$('aside#catalogue').outerWidth() + 5 + 'px'});
}
}else if($('aside#catalogue').height() >= $(window).height() && $('aside#catalogue').outerHeight() < ($('footer').offset().top - $catalogueOffsetTop)){
// aside#catalogue的上下滑动
if(($(document).scrollTop() + $(window).height()) <= ($('aside#catalogue').outerHeight() + $catalogueOffsetTop)){
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
}else if(($(document).scrollTop() + $(window).height()) < $('footer').offset().top){
$catalogue_top = $(window).height() - $('aside#catalogue').outerHeight() - 20;
$catalogue_top = $(window).height() - $('aside#catalogue').outerHeight() - 20 - ($(document).height() - $('footer').offset().top);
$('aside#catalogue').css({'position':'fixed','top':$catalogue_top + 'px'});
$('aside#catalogue').css({'position':'fixed','top': $catalogue_top + 'px'});
}
}
// aside#archive的上下滑动
if($('aside#archive').outerHeight() < $(window).height()){
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
$catalogue_top = $(window).height() - $('aside#archive').outerHeight();

网上所有的代码考虑的是该区域的高度小于窗口高度的情形,是以代码很简单。当区域高度等于和年夜于窗口高度时,我们又涣有新的考虑。


$('aside#archive').css({'position':'fixed','top':'0','left':$archiveOffestLeft + 'px'});
}else{
}
if($(window).width() > 1024)$('#main').css({'padding-left':'0'});
if($(document).scrollTop() <= $archiveOffestTop){
}else if($('aside#archive').height() >= $(window).height() && $('aside#archive').outerHeight() < ($('footer').offset().top - $archiveOffestTop)){
if(($(document).scrollTop() + $(window).height()) <= ($('aside#archive').outerHeight() + $archiveOffestTop)){
//alert($(document).scrollTop() + $(window).height() - $(document).height());
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveOffestLeft + 'px'});
}else if(($(document).scrollTop() + $(window).height()) < $('footer').offset().top){
$('aside#archive').css({'position':'fixed','top': $catalogue_top + 'px','left':$archiveOffestLeft + 'px'});
}else{
$('aside#archive').css({'position':'fixed','top':$catalogue_top + 'px','left':$archiveOffestLeft + 'px'});
}
}else{ // 如不美观屏幕不处于左侧,就让这两个跟年夜归位
$('aside#catalogue').css({'position':'static','top':$catalogueOffsetTop});
$('#main').css({'padding-left':'0'});
}
$('aside#archive').css({'position':'static','top':$archiveOffestTop,'left':$archiveO⒍詐adding-top或margin-top前进履态赋值;

前两种都是用到了postion对元素的位置进行放置,和float一样,position将元素年夜正常的文本流中拖出来。而padding或margin的体例例是节制元素的边距来实现。到底哪一种好呢?


$catalogue_top = $(window).height() - $('aside#archive').outerHeight() - ($(document).height() - $('footer').offset().top);

使用position:absolute;会呈现滚动时发生股栗(火狐中不会) ,使用padding-top时会让有布景的元素看上去难看,也会发生股栗,使用position:fixed不撑持IE6,使用margin-top没有考试考试过,应该会发生股栗。本段代码选择的是position:fixed,独一不贰生股栗的方案,可是在IE6下不会有该效不美观。

三、要考虑的情形

1、要跟年夜的元素的高度和屏幕的高度进行斗劲