I have a method on a page that opens and hides a scrolling block in certain places
JavaScript
x
115
115
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<script>6
var sideMenu, footer, wrapper, nsl;7
8
document.addEventListener("DOMContentLoaded", init, false);9
10
function check() {11
var range = document.body.scrollHeight - footer.offsetHeight;12
var position = (nsl.offsetHeight + nsl.getBoundingClientRect().y - wrapper.getBoundingClientRect().y).toFixed(1);13
14
nsl.innerText =15
'n Range: ' + range +16
'n Position: ' + position;17
18
if (window.scrollY > 200 && (range > position)) {19
nsl.style.visibility = "visible";20
} else {21
nsl.style.visibility = "hidden";22
}23
};24
25
function init() {26
sideMenu = document.getElementById('sideMenu');27
footer = document.getElementById('footer');28
wrapper = document.getElementById('wrapper');29
nsl = document.getElementById('navShareLink');30
31
window.onscroll = check;32
check();33
}34
</script>35
<style>36
.article-wrapper {37
min-height: 200vh;38
position: relative;39
top: 0;40
left: 0;41
}42
43
.article-wrapper p:first-of-type {44
margin-top: 0;45
}46
47
footer {48
min-height: 100vh;49
background-color: lightskyblue;50
}51
52
.sidemenu-shares {53
z-index: 999;54
display: flex;55
flex-direction: column;56
align-items: center;57
height: 100%;58
justify-content: center;59
position: fixed;60
top: 0;61
right: 0;62
flex-wrap: nowrap;63
gap: 40px;64
}65
66
.rectangle {67
z-index: 998;68
transition: opacity 0.5s;69
padding: 5px;70
height: 106px;71
width: 123px;72
background-color: rgba(200, 0, 0, 0.1);73
border-radius: 24px;74
}75
76
.content {77
height: 50px;78
border: 1px dotted gray;79
}80
81
</style>82
</head>83
84
<body>85
<div id="wrapper" class="article-wrapper">86
87
<div id='sideMenu' class="sidemenu-shares">88
<div id="navShareLink" class="rectangle">89
90
</div>91
</div>92
93
<div class="main-banner">94
<h1>Title</h1>95
</div>96
97
<div class='content'>Main content</div>98
<div class='content'>Main content</div>99
<div class='content'>Main content</div>100
<div class='content'>Main content</div>101
<div class='content'>Main content</div>102
<div class='content'>Main content</div>103
<div class='content'>Main content</div>104
<div class='content'>Main content</div>105
<div class='content'>Main content</div>106
<div class='content'>Main content</div>107
<div class='content'>Main content</div>108
</div>109
110
<footer id='footer'>111
Footer112
</footer>113
</body>114
115
</html>Now it turns out that in my sideMenu there is only one block, but I want to add another one and so that they hide and open together
This is how the code should look like after adding the block
JavaScript
1
10
10
1
<div id='sideMenu' class="sidemenu-shares">2
<div id="navShareLink" class="rectangle">3
4
</div>5
6
<div id="navToTop" class="to-top">7
8
</div>9
</div>10
But now I can’t make them both hide
I am trying to do the following in js
JavaScript
1
2
1
nsl = document.querySelectorAll("#navShareLink, #navToTop");2
But everything works incorrectly and nothing is hiding at all
Advertisement
Answer
I am still not much clear what exactly the problem but as I can understand you facing issues in the show and hiding the element. this code is not working
JavaScript
1
6
1
if (window.scrollY > 200 && (range > position)) {2
nsl.style.visibility = "visible";3
} else {4
nsl.style.visibility = "hidden";5
}6
you just need to update it with
JavaScript
1
9
1
if (window.scrollY > 200 && (range > position)) {2
nsl.style.display = "block";3
nsl1.style.display = "block";4
} else {5
6
nsl.style.display = "none";7
nsl1.style.display = "none";8
}9
here is working demo
JavaScript
1
122
122
1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>6
<script>7
var sideMenu, footer, wrapper, nsl;8
9
document.addEventListener("DOMContentLoaded", init, false);10
11
function check() {12
var range = document.body.scrollHeight - footer.offsetHeight;13
var position = (nsl.offsetHeight + nsl.getBoundingClientRect().y - wrapper.getBoundingClientRect().y).toFixed(1);14
15
nsl.innerText =16
'n Range: ' + range +17
'n Position: ' + position;18
19
if (window.scrollY > 200 && (range > position)) {20
nsl.style.display = "block";21
nsl1.style.display = "block";22
} else {23
24
nsl.style.display = "none";25
nsl1.style.display = "none";26
}27
};28
29
function init() {30
sideMenu = document.getElementById('sideMenu');31
footer = document.getElementById('footer');32
wrapper = document.getElementById('wrapper');33
nsl = document.getElementById('navShareLink');34
nsl1 = document.getElementById('navToTop');35
window.onscroll = check;36
check();37
}38
</script>39
<style>40
.article-wrapper {41
min-height: 200vh;42
position: relative;43
top: 0;44
left: 0;45
}46
47
.article-wrapper p:first-of-type {48
margin-top: 0;49
}50
51
footer {52
min-height: 100vh;53
background-color: lightskyblue;54
}55
56
.sidemenu-shares {57
z-index: 999;58
display: flex;59
flex-direction: column;60
align-items: center;61
height: 100%;62
justify-content: center;63
position: fixed;64
top: 0;65
right: 0;66
flex-wrap: nowrap;67
gap: 40px;68
}69
70
.rectangle {71
z-index: 998;72
transition: opacity 0.5s;73
padding: 5px;74
height: 106px;75
width: 123px;76
background-color: rgba(200, 0, 0, 0.1);77
border-radius: 24px;78
}79
80
.content {81
height: 50px;82
border: 1px dotted gray;83
}84
85
</style>86
</head>87
88
<body>89
<div id="wrapper" class="article-wrapper">90
91
<div id='sideMenu' class="sidemenu-shares">92
<div id="navShareLink" class="rectangle">93
94
</div>95
<div id="navToTop" class="to-top">96
<h1>hello</h1>97
</div>98
</div>99
100
<div class="main-banner">101
<h1>Title</h1>102
</div>103
104
<div class='content'>Main content</div>105
<div class='content'>Main content</div>106
<div class='content'>Main content</div>107
<div class='content'>Main content</div>108
<div class='content'>Main content</div>109
<div class='content'>Main content</div>110
<div class='content'>Main content</div>111
<div class='content'>Main content</div>112
<div class='content'>Main content</div>113
<div class='content'>Main content</div>114
<div class='content'>Main content</div>115
</div>116
117
<footer id='footer'>118
Footer119
</footer>120
</body>121
122
</html>