首页>网站建设>zblogphp主题侧边栏添加悬浮效果的方法《博客模板[自适应]》主题HTML5模版(ydmm)模版SEO优化记录
2019
05-19

zblogphp主题侧边栏添加悬浮效果的方法《博客模板[自适应]》主题HTML5模版(ydmm)模版SEO优化记录

路由器刷机交流Q群

zblogphp主题侧边栏添加悬浮效果的方法

这篇文章是继《zblogphp《博客模板[自适应]》主题HTML5模版(ydmm)模版SEO修改记录》后的续篇。

很多网站博客都喜欢用“侧栏跟随”的效果,也就是随着滚动条的滚动,而跟着滑动或者固定的效果;感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有适合于广告联盟的展示。

今天就说下在zblog主题YDMM上添加右侧悬浮效果的方法,效果可以看下本站的效果。

首先在CSS里面添加

.moveside {

    position:fixed;

    top:0;

    margin-top:45px;

这里的.moveside跟下面的DIV对应,就是想要智能滑动的元素对应的选择器id,可以自己添加效果自己修改。由于这里YDMM主题往下滚动的时候顶部会有导航条宽度是45,所以添加了一个margin-top:45px;

然后在右侧栏底部位置添加

<div id="moveside">这里是一些代码</div>//这里的id="moveside"和上面对应

注意最好在底部侧边栏底部添加,因为当页面滚动到此处的时候就会悬浮显示这个DIV,如果在中部添加DIV,就会出现覆盖下面侧边栏内容的情况。添加这个悬浮的目的主要是有些页面太长,侧边栏太短的时候的空白。

然后添加JS代码

$(function() {

    var toTopHeight = $("#moveside").offset().top;

    $(window).scroll(function() {

        if ($(document).scrollTop() > toTopHeight) {

            if ('undefined' == typeof(document.body.style.maxHeight)) {

                var scrollTop = $(document).scrollTop();

                $("#moveside").css({

                    'position': 'absolute',

                    'top': scrollTop + 'px'

                })

            } else {

                $("#moveside").addClass("moveside")

            }

        } else {

            if ('undefined' == typeof(document.body.style.maxHeight)) {

                $("#moveside").css({

                    'position': 'absolute',

                    'top': toTopHeight + 'px'

                })

            } else {

                $("#moveside").removeClass("moveside")

            }

        }

    })

});

到这里就可以实现右侧悬浮的效果了。

免费支持本站

支付宝打赏支付宝打赏微信打赏微信打赏

本文》有 0 条评论

留下一个回复 (您的评论需要经过审核才能显示)