https://cardinfolink.github.io/js/pageContent.js

1/* jshint asi:true */
2
3/**
4 * [fixSidebar description]
5 * 滚轮滚到一定位置时，将 sidebar-wrap 添加 fixed 样式
6 * 反之，取消样式
7 */
8(function() {
9    if (window.innerWidth > 770) {
10
11        var sidebarWrap = document.querySelector('.right>.wrap')
12
13        //fix 之后百分比宽度会失效，这里用js赋予宽度
14        sidebarWrap.style.width = sidebarWrap.offsetWidth + "px"
15        window.onscroll = function() {
16
17            // 页面顶部滚进去的距离
18            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
19
20
21            // 页面底部滚进去的距离
22            var htmlHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
23                // console.log(htmlHeight);
24            var scrollBottom = htmlHeight - window.innerHeight - scrollTop
25
26            if (scrollTop < 53) {
27                sidebarWrap.classList.remove('fixed')
28                sidebarWrap.classList.remove('scroll-bottom')
29            } else if (scrollBottom >= (190 - 38)) {
30                sidebarWrap.classList.remove('scroll-bottom')
31                sidebarWrap.classList.add('fixed')
32            } else if (isMaxHeight()) { //content 达到maxHeight
33                sidebarWrap.classList.remove('fixed')
34                sidebarWrap.classList.add('scroll-bottom')
35            }
36        }
37        setContentMaxHeightInPC() //设置目录最大高度(PC端)
38    }
39    moveTOC() //将Content内容转移
40}());
41
42/**
43 * 设置目录最大高度
44 */
45function setContentMaxHeightInPC() {
46    var windowHeight = window.innerHeight
47    var contentUl = document.querySelector('.content-ul')
48    var contentMaxHeight = windowHeight - 77 - 60
49    contentUl.style.maxHeight = contentMaxHeight + 'px'
50}
51
52/**
53 * 达到最大高度
54 * @return {Boolean} [description]
55 */
56function isMaxHeight() {
57    var windowHeight = window.innerHeight
58    var contentUl = document.querySelector('.content-ul')
59    var contentMaxHeight = windowHeight - 77 - 60
60    var contentHeight = contentUl.offsetHeight
61    return contentMaxHeight === contentHeight
62        // console.log(contentMaxHeight);
63        // console.log(contentHeight);
64}
65
66
67//-------------mobile--------------
68/**
69 * 屏幕宽度小于770px时，点击锚点按钮，弹出目录框
70 * @param  {[type]} function( [description]
71 * @return {[type]}           [description]
72 */
73(function() {
74    if (window.innerWidth <= 770) {
75        var anchorBtn = document.querySelector('.anchor')
76        var rightDiv = document.querySelector('.right')
77
78        /**
79         * 监听锚点按钮
80         */
81        anchorBtn.onclick = function(e) {
82            e.stopPropagation()
83            rightDiv.classList.add('right-show')
84            anchorBtn.classList.add('anchor-hide')
85        }
86
87        //监听body，点击body，隐藏Content
88        document.querySelector('body').addEventListener('click', function() {
89            rightDiv.classList.remove('right-show')
90            anchorBtn.classList.remove('anchor-hide')
91        })
92
93        ancherPostion(anchorBtn, rightDiv) //目录锚的位置固定
94        setContentMaxHeight() //设置目录最大高度
95    }
96}());
97
98/**
99 * 目录锚的位置固定
100 */
101function ancherPostion(anchorBtn, rightDiv) {
102    window.addEventListener('scroll', function() {
103        // console.log('scroll');
104        var top = anchorBtn.getBoundingClientRect().top
105            // console.log(top);
106        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
107        if (scrollTop > 50) {
108            anchorBtn.style.top = '20px'
109            rightDiv.style.top = '20px'
110        } else {
111            anchorBtn.style.top = '76px'
112            rightDiv.style.top = '76px'
113        }
114    })
115}
116
117/**
118 * 设置目录最大高度
119 */
120function setContentMaxHeight() {
121    var windowHeight = window.innerHeight
122    var contentUl = document.querySelector('.content-ul')
123    var contentMaxHeight = windowHeight - 180
124    contentUl.style.maxHeight = contentMaxHeight + 'px'
125}
126
127//-------------post Content----------------------
128//将Content内容转移
129function moveTOC() {
130    if (document.querySelector('#markdown-toc') !== null) {
131        var TOCString = document.querySelector('#markdown-toc').innerHTML
132        var contentUl = document.querySelector('#content-side')
133        contentUl.insertAdjacentHTML('afterbegin', TOCString) //插入字符串
134
135        // if (!isAndroidWechatBrowser()) {
136
137            //添加scroll样式，为了平滑滚动
138            //add class "scroll", for smooth scroll
139            var aTags = document.querySelectorAll('#content-side a')
140
141            //add class for everyone

142            // aTags.forEach(function () {
143            //     console.log(this);
144            // })
145            for (var i = 0; i < aTags.length; i++) {
146                if (!aTags[i].classList.contains('scroll')) {
147                    aTags[i].classList.add('scroll')
148                }
149            }
150        // }
151    }
152}
153
154/**
155 * 判断安卓版微信浏览器
156 * @return {Boolean} [description]
157 */
158function isAndroidWechatBrowser() {
159    var ua = navigator.userAgent.toLowerCase()
160    return /micromessenger/.test(ua) && /android/.test(ua2)
161}