新闻中心
emlog设置固定滚动侧边栏的方法
作者 / 无忧主机 时间 2016-03-13 06:57:03
在侧边栏设置滚动式的布局方式已经是非常普遍的事情了，我们经常可以在网上的各大论坛和门户网站中都可以看到这个布局方式。滚动式的侧边栏不仅可以让我们的网站页面显的更加美观，而且可以有效利用侧边栏的位置，让一些页面信息可以长时间让用户看到，对于一些小广告来说采取这种滚动式布局更是具有商业价值。那么下面无忧主机小编就来详细的介绍一下，如何在php虚拟主机环境下，设置emlog博客程序的固定滚动侧边栏的效果。 在实现固定滚动侧边栏的效果之前，我们需要在自己网站程序里加载jquery，但是emlog博客程序里自带这个js代码库，可以直接调用/include/lib/js/jquery/目录下的jquery-1.7.1.js文件，其代码如下：
<script>
$(function () {
if ($(".fixed_side").length > 0) {
var offset = $(".fixed_side").offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (offset.top < scrollTop) $(".fixed_side").addClass("fixed");
else $(".fixed_side").removeClass("fixed");
});}});
</script>
这一段js代码是用来实现固定滚动的效果的，设置好之后是编写html源码：
<div class="fixed_side"><img src="链接图片地址"></div>最后用css样式进行外观的设定：
.fixed_side{clear:both;overflow:hidden;text-align:center;margin:5px}
.fixed_side img{max-width:100%;}
.fixed{position:fixed;top:0px;width:237px;margin:5px}
所有文件和代码编辑好了后保存好文件，登入网站的后台刷新一下数据缓存就可以了。
无忧主机相关文章推荐阅读：
EMLOG如何设置二级域名绑定子目录的伪静态规则
EMLOG调用分类文章图文显示
EMLOG手机模板部分调用方法
本文地址：https://www.51php.com/others/21844.html
