https://willzhang4a58.github.io/static/js/index.js

1/**
2 * 页面ready方法
3 */
4$(document).ready(function() {
5
6    categoryDisplay();
7    generateContent();
8    backToTop();
9});
10
11/**
12 * load方法，页面的加载完成后触发
13 * {fixFooterInit();} 固定Footer栏
14 */
15/*$(window).load(function() {
16    fixFooterInit();
17});*/
18
19
20/**
21 * 固定底栏的初始化方法
22 * 在一开始载入页面时，使用fixFooter()方法固定底栏。
23 * 在浏览器窗口改变大小是，依然固定底栏
24 * @return {[type]} [description]
25 */
26function fixFooterInit() {
27    var footerHeight = $('footer').outerHeight();
28    var footerMarginTop = getFooterMarginTop() - 0; //类型转换
29    // var footerMarginTop = 80;
30
31    fixFooter(footerHeight, footerMarginTop); //fix footer at the beginning
32
33    $(window).resize(function() { //when resize window, footer can auto get the postion
34        fixFooter(footerHeight, footerMarginTop);
35    });
36
37    /*    $('body').click(function() {
38        fixFooter(footerHeight, footerMarginTop);
39    });*/
40
41
42}
43
44/**
45 * 固定底栏
46 * @param  {number} footerHeight    底栏高度
47 * @param  {number} footerMarginTop 底栏MarginTop
48 * @return {[type]}                 [description]
49 */
50function fixFooter(footerHeight, footerMarginTop) {
51    var windowHeight = $(window).height();
52    var contentHeight = $('body>.container').outerHeight() + $('body>.container').offset().top + footerHeight + footerMarginTop;
53    // console.log("window---"+windowHeight);
54    // console.log("$('body>.container').outerHeight()---"+$('body>.container').outerHeight() );
55    // console.log("$('body>.container').height()---"+$('body>.container').height() );
56    // console.log("$('#main').height()--------"+$('#main').height());
57    // console.log("$('body').height()--------"+$('body').height());
58    //console.log("$('#main').html()--------"+$('#main').html());
59    // console.log("$('body>.container').offset().top----"+$('body>.container').offset().top);
60    // console.log("footerHeight---"+footerHeight);
61    // console.log("footerMarginTop---"+footerMarginTop);
62    console.log(contentHeight);
63    if (contentHeight < windowHeight) {
64        $('footer').addClass('navbar-fixed-bottom');
65    } else {
66        $('footer').removeClass('navbar-fixed-bottom');
67    }
68
69    $('footer').show(400);
70}
71
72/**
73 * 使用正则表达式得到底栏的MarginTop
74 * @return {string} 底栏的MarginTop
75 */
76function getFooterMarginTop() {
77    var margintop = $('footer').css('marginTop');
78    var patt = new RegExp("[0-9]*");
79    var re = patt.exec(margintop);
80    // console.log(re[0]);
81    return re[0];
82}
83
84/**
85 * 分类展示
86 * 点击右侧的分类展示时
87 * 左侧的相关裂变展开或者收起
88 * @return {[type]} [description]
89 */
90function categoryDisplay() {
91    /*only show All*/
92    $('.post-list-body>div[post-cate!=All]').hide();
93    /*show category when click categories list*/
94    $('.categories-list-item').click(function() {
95        var cate = $(this).attr('cate'); //get category's name
96
97        $('.post-list-body>div[post-cate!=' + cate + ']').hide(250);
98        $('.post-list-body>div[post-cate=' + cate + ']').show(400);
99    });
100}
101
102/**
103 * 回到顶部
104 */
105function backToTop() {
106    //滚页面才显示返回顶部
107    $(window).scroll(function() {
108        if ($(window).scrollTop() > 100) {
109            $("#top").fadeIn(500);
110        } else {
111            $("#top").fadeOut(500);
112        }
113    });
114    //点击回到顶部
115    $("#top").click(function() {
116        $("body").animate({
117            scrollTop: "0"
118        }, 500);
119    });
120
121    //初始化tip
122    $(function() {
123        $('[data-toggle="tooltip"]').tooltip();
124    });
125}
126
127
128/**
129 * 侧边目录
130 */
131function generateContent() {
132
133    // console.log($('#markdown-toc').html());
134    if (typeof $('#markdown-toc').html() === 'undefined') {
135        // $('#content .content-text').html('<ul><li>文本较短，暂无目录</li></ul>');
136        $('#content').hide();
137        $('#myArticle').removeClass('col-sm-9').addClass('col-sm-12');
138    } else {
139        $('#content .content-text').html('<ul>' + $('#markdown-toc').html() + '</ul>');
140        /*   //数据加载完成后，加固定边栏
141        $('#myAffix').attr({
142            'data-spy': 'affix',
143            'data-offset': '50'
144        });*/
145    }
146    console.log("myAffix!!!");
147}