dmitryyacenko.github.io/scrollState.js at master · dmitryyacenko/dmitryyacenko.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
window.onload = function () {
    switchDisplay()
};

window.onresize = function () {
    switchDisplay();
}

window.onscroll = function () {
    switchDisplay();
}

window.onchange = function () {
    switchDisplay();
}

function switchDisplay() {

    function div(val, by) {
        return (val - val % by) / by;
    }


    var mainContent = document.getElementsByClassName("main");
    var menuWrapper = document.getElementsByClassName("nav-wrapper");
    var headerBlock = document.getElementsByClassName("header");
    var articleBlocks = document.getElementsByTagName("article");

    var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight);

    var articleFixedHeight = Math.max(articleBlocks[0].clientHeight, articleBlocks[0].offsetHeight, articleBlocks[0].scrollHeight);

    var headerHeight = Math.max(headerBlock[0].clientHeight, headerBlock[0].offsetHeight, headerBlock[0].scrollHeight);

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop; //позиция скрола
    var scrollStatus = document.getElementsByClassName("scroll-status");

    for (var i = 0; i < menuWrapper.length; i++) {
        if (mainContent[0].offsetTop <= scrollTop) {
            if (menuWrapper[i].style.display !== "block") {
                menuWrapper[i].style.display = "block";
            }

            var scrollPos = 0;

            var foundPos = menuWrapper[i].firstElementChild.className.indexOf("horiz");
            if (foundPos !== -1) {

                var scrollBGElem = document.getElementsByClassName("scroll-bg")[0];

                var scrollMax = Math.max(scrollBGElem.clientWidth, scrollBGElem.offsetWidth, scrollBGElem.scrollWidth);

                var articleNumber = div(scrollTop - headerHeight, articleFixedHeight);

                var navMarker = document.getElementsByClassName("nav-marker")

                for (var j = 0; j < articleNumber; j++) {
                    if (!navMarker[j].classList.contains("nav-visited")) {
                        if (navMarker[j].classList.contains("nav-visited-last")) {
                            navMarker[j].classList.remove("nav-visited-last")
                        }
                        navMarker[j].classList.add("nav-visited")
                    }
                }

                if (!navMarker[articleNumber].classList.contains("nav-visited-last")) {
                    if (navMarker[articleNumber].classList.contains("nav-visited")) {
                        navMarker[articleNumber].classList.remove("nav-visited")
                    }
                    navMarker[articleNumber].classList.add("nav-visited-last")
                }

                for (var j = articleNumber + 1; j < articleBlocks.length; j++) {
                    if (navMarker[j].classList.contains("nav-visited")) {
                        navMarker[j].classList.remove("nav-visited")
                    }
                    if (navMarker[j].classList.contains("nav-visited-last")) {
                        navMarker[j].classList.remove("nav-visited-last")
                    }
                }

                scrollPos = scrollMax * (scrollTop - headerHeight) / (scrollHeight - headerHeight - articleFixedHeight);
                scrollStatus[i].style.width = scrollPos + "px";
            }

            foundPos = menuWrapper[i].firstElementChild.className.indexOf("vertic");
            if (foundPos !== -1) {

                var articleNumber = 0;

                for (var j = 0; j < articleBlocks.length; j++) {
                    articleNumber = j;
                    if (articleBlocks[j].getBoundingClientRect().top > window.innerHeight) {
                        articleNumber = j - 1;
                        break;
                    }
                }

                var localPercent = 1;

                if (articleBlocks[articleNumber].getBoundingClientRect().bottom > window.innerHeight) {
                    var articleHeight = Math.max(articleBlocks[articleNumber].clientHeight, articleBlocks[articleNumber].offsetHeight, articleBlocks[articleNumber].scrollHeight);

                    localPercent = (window.innerHeight - articleBlocks[articleNumber].getBoundingClientRect().top) / articleHeight;


                }

                scrollPos = (localPercent + articleNumber) * 100 / (articleBlocks.length);

                scrollStatus[i].style.height = scrollPos + "%";
            }

        } else {
            if (menuWrapper[i].style.display !== "none") {
                menuWrapper[i].style.display = "none";
            }
        }
    }
};