emlog固定滚动侧边栏实现方法
滚动侧边栏的方式，好处显而易见，当博文较长的时候就不会因为侧边栏太短而产生不美观了。其实有集中方法：另一种方法请参考侧边栏滚动教程；滚动侧边栏的教程，其实很简单，先来看看代码。需要加载jquery。emlog可以直接使用/include/lib/js/jquery/jquery-1.7.1.js。js代码如下：
<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="https://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}演示请看本站首页侧边栏广告
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-9-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读