闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

使用jquery实现类似36氪的广告跟随效果

2016-03-26 约 1 分钟读完 搬砖秘籍

前几天给麻辣GIS修改了一下主题,更加偏向扁平化一点,顺带优化了一下广告样式。之前的滚动跟随是使用的一个插件:博客侧边栏跟随滚动效果,这个插件有一个缺点,如果跟随的div过高的话会有一个触底的bug。

如图:

跟随的div会无情的插入footer,深深的ci了进去(不要污!)。

优秀的解决方案

这一点36氪的处理就很好,左侧先 static,当顶部banner图片不在显示范围的时候属性改为 fixed,最后当触底的时候,属性变为 absolute

这个处理效果我个人非常喜欢,这样整个页面一直很充实,可以有效的降低跳出率并提高广告的转化率。

山寨实现

很喜欢这个效果,我也山寨实现了一个,效果图:

可以访问麻辣GIS查看具体效果。

实现说明

先看一个示意图:

其中box1正常滚动,box2和myad这两个div实现滚动跟随。

代码如下:

$(window).on('scroll', function(event) {  //响应滚动事件
//for right
var sc = $(document).scrollTop();//获取已经滚动过的高度
var tabh = $("#box1").height();  //box1高度
var mh = $("#main").height();    //主页面高度
var h  = $(window).height();     //窗口高度
var sh = $("#sidebar").height(); //侧边栏的高度
var tuih = $("#box2").height();  //box2高度
if(mh-200>sh&&h>371){ //条件:main高于sidebar,并用窗口高度要高于371,否则不实现滚动跟随

    if(sc<tabh){//当box1可见时,恢复默认static
        $("#box2").css({position: "static", top: "auto"});
        $("#myad").css({position: "static", top: "auto"});
    }
    if(sc>tabh&&sc+h<mh){ //实现滚动跟随
        $("#box2").css({position: "fixed", top: "5px"});
        $("#myad").css({position: "fixed", top: 25+tuih+"px"});
    }
    if(sc+h>mh){ //触底解决方案 
        var toph = mh - 275;
        $("#box2").css({position: "absolute", top: toph-tuih-20+"px"});
        $("#myad").css({position: "absolute", top: toph+"px"});
    }
}
});

结语

现在的问题是感觉不如36kr实现的流畅,后来会慢慢优化,如有建议,欢迎交流。