广告图片随滚动条,上下移动做相应的改变,覆盖或者顶上去
2017-09-16 17:13
501 查看
/*几个必须的参数*/ /*窗口的高度 - 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 */});
相关文章推荐
- 类似新浪首页两边漂浮的广告图片,随滚动条上下移动
- 广告图片随滚动条移动
- 如何用图片或按钮控制IE上下滚动条的移动???
- 如何实现广告图片总是显示在页面上方,并且随滚动条同步移动?
- 转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告
- js 层随着滚动条上下移动
- 定位于网页右边的图片(不随滚动条移动)
- 图片随手机姿态变化上下左右移动
- Js实现图片缩放上下左右移动效果
- MFC在鼠标自定义的一定的范围内实现拖动窗口移动、错误:不支持尝试执行的操作、实现进度条颜色的渐变或者背景和前景色的改变
- CSS 去除图片上下的间距或者间隙
- 图片动画横条广告带上下滚动可自定义图片、链接等等
- 图片动画横条广告带上下滚动可自定义图片、链接等等
- 腾讯QQ网页在线客服,随网页滚动条上下移动的效果一
- 求一个页面浮动层的例子?要求当用户上下拉动IE滚动条的时候,层自动移动,但是开始时该层与浏览器顶端有距离,最后随着移动该层停留在顶端下面不动,当移动到最上面时恢复原来。
- 维多利亚的秘密微信推广广告模仿-图片上下滑动
- 不确定宽高的图片或者视频在一个盒子里的上下左右居中
- 两个或者多个图片上下之间有空隙怎么办?
- 上下光标移动选定图片
- 腾讯QQ网页在线客服,随网页滚动条上下移动的效果