«

emlog固定滚动侧边栏实现方法

时间:2015-8-2 15:24     作者:admin     分类: emlog


滚动侧边栏的方式,好处显而易见,当博文较长的时候就不会因为侧边栏太短而产生不美观了。其实有集中方法:另一种方法请参考侧边栏滚动教程;滚动侧边栏的教程,其实很简单,先来看看代码。需要加载jquery。emlog可以直接使用/include/lib/js/jquery/jquery-1.7.1.js。js代码如下:

<pre style="overflow:auto" ;class="prettyprint lang-php linenums"><script>
$(function () {
if ($(".fixed_side").length > 0) {
var offset = $(".fixed_side").offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
//如果距离顶部的距离小于浏览器滚动的距离,则添加fixed属性。
if (offset.top < scrollTop) $(".fixed_side").addClass("fixed");
//否则清除fixed的css属性
else $(".fixed_side").removeClass("fixed");
});}});
</script>
html代码:

<div class="fixed_side"><img src="http://www.shuyong.net/aliyun.jpg"></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

版权所有:Mrxn's Blog
文章标题:emlog固定滚动侧边栏实现方法
除非注明,文章均为 Mrxn's Blog 原创,请勿用于任何商业用途,转载请注明作者和出处 Mrxn's Blog

扫描二维码,在手机上阅读

推荐阅读:

评论:
avatar
s站 2019-01-08 23:33
你首页都没侧边栏了(手动滑稽)为何没有表情
commentator
Mrxn 2019-02-15 20:06
@s站:换模板了呀。。。手动滑稽 比表情更生动 哈哈哈
avatar
Liangge 2015-09-04 12:32
pjax的重载函数是什么
commentator
Mrxn 2015-09-05 15:47
@Liangge:重新加载函数内的内容