刘明野的博客
侧边栏固定浮动小工具
  • 2016年08月16日
  • 干货分享
  • 0 评论
  • 31 汉字
  • 13 热度

分享下本站的侧边小工具代码 取自inlo主题

html

1

2

3

4

5

6

7

8

9

10
<div id="scroll_box">
    <div class="widget-box-scroll">
        <section class="widget">
        <h3 class="widget-title">侧边固定</h3>
        <ul class="widget-list">
            <li>固定小工具 可放置广告</li>
        </ul>
        </section>
    </div>
</div>

css

1

2

3

4

5

6

7

8
.widget-box-scroll {
    width295px;
}
.follow {
    positionfixed;
    top0;
    margin-top60px;
}

js

1

2

3

4

5

6
$(function() {
    $(window).scroll(function() {
        var c = $(window).scrollTop();
        0 < $("#scroll_box").length && ($("#scroll_box").offset().top-60 < c ? $("#scroll_box .widget-box-scroll").addClass("follow") : $("#scroll_box .widget-box-scroll").removeClass("follow"))
    })
});

本文由 刘明野 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: 2016-08-31 22:13:19