广告图片随滚动条,上下移动做相应的改变,覆盖或者顶上去

来源:互联网 发布:数据科学实战 微盘 编辑:程序博客网 时间:2024/05/17 06:25
/*几个必须的参数*//*窗口的高度 - div距离顶部的距离(offset().top - scrollTop) - div的高度 = 该div底部 距离窗口的底端的距离*//*div距离 顶部 的距离 + div的height = div 底部 距离窗口顶部的距离*//*底部距离窗口上端的距离 <= 窗口的高度*//*图片和窗口高度之间的留白(用来计算距离底部的距离时用作滚动效果) = 窗口高度 - 图片高度 - 图片间隙 - 顶部固定条高度*//*窗口的高度 - div距离顶部的距离(offset().top - scrollTop) - div的高度 = 该div底部 距离窗口的底端的距离=图片距离低端的距离*/minHeight = fixAd_pic1.height() + fixAd_pic2.height() + fixAd_pic3.height() + 30 + 3*15,                /*图片高度 + 间隙高度 + 顶部浮动条高度*/maxHeight = fixAd_pic1.height() + fixAd_pic2.height() + fixAd_pic3.height() + 80 + 30 + 4*15 ,          /*80 footer的高度  15 间隙距离  30 顶部浮动条的距离*/windowHeight = $(window).height();              //窗口高度news_list = $("#news_list");                    //以该节点为基点news_listTop = news_list.offset().top,documentScroll = documentEle.scrollTop(),       //滚动条距离顶端高度/*div距离最低端的距离 = 图片最下边时的距离*/bottom = windowHeight - news_list.height() - (news_listTop - documentScroll);//基线底端距离窗口顶端的高度 as = news_listTop - documentScroll + news_list.height(),                                                //图片下端距离底部的距离 bs = windowHeight - fixAd_pic3.height() - fixAd_pic2.height() - fixAd_pic1.height() - 30 - 45;             /* 窗口高度大于图片高度 小于图片+顶部底部的高度     判断图片合适做固定开始向上向下改变位置*/if((as + bs) <= windowHeight){     fixAd_pic3.css({"top": "auto", "bottom": bottom + 15 + "px"});     fixAd_pic1.css({"top": "auto", "bottom": bottom + 15 + 270 + 15 + "px"});}else{    fixAd_pic3.css({"top": "", "bottom": "auto"});    fixAd_pic1.css({"top": "", "bottom": "auto"});}/*窗口高度小于 440*/ /*if((news_listTop - documentScroll + news_list.height() + (windowHeight - fixAd_pic3.height() -fixAd_pic1.height())) <= windowHeight){*/ /* 改为下边这种*/ if (windowHeight <= minHeight) {        fixAd_pic3.css({"top": "auto", "bottom": bottom  + "px"});        fixAd_pic1.css({"top": "auto", "bottom": bottom  + 270 + 15 + "px"}); }else{        fixAd_pic3.css({"top": "", "bottom": "auto"});        fixAd_pic1.css({"top": "", "bottom": "auto"}); }

ps:在滚动效果中过去到某个div的高度$(".div").height() 与

直接在页面加载完成后就获取高度存在差异,目前不清楚为什么,待解决

即: var divHeight1 = $(".div").height();与: $(document).scroll(function(){var divHeight2 = $(".div").height();/* divHeight1  不等于  divHeight2  */});


原创粉丝点击