侧边栏固定浮动小工具

2016/08/16 · 干货 · 1311次阅读

分享下本站的侧边小工具代码 取自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 {
    width: 295px;
}
.follow {
    position: fixed;
    top: 0;
    margin-top: 60px;
}

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"))
    })
});

喝杯水

标签：typecho

最后编辑于：2016/08/31 22:13

添加新评论