粘性侧边栏手风琴无法正确滚动

Question

我制作了一个粘性侧边栏(如果它看起来很熟悉，请使用w3schools的代码(，并在其中添加了手风琴菜单。

其目的是侧边栏永久存在，但在用户向下滚动到标题下方之前不会占据整个屏幕。如果用户打开一个手风琴式菜单，并且该菜单需要一个滚动条，则应该为侧边栏显示一个单独的滚动条。

然而，奇怪的事情偶尔会发生。如果我有一个页面，其中有太多的内容，那么只有当侧边栏是粘性的时，侧边栏的滚动条才会出现。如果内容适合一个屏幕(因此粘性方面永远不会发挥作用(，侧边栏的滚动条就不会出现。相反，它是一个主窗口滚动条，它可以阻止我向下滚动侧边栏。

这是代码：

HTML:

<div id="sidebar" class="sidebar">
<button class="accordion">Grade 1</button>
<div class="panel">             
<a href="Note-Types.html" style="border-top: solid silver;">Note Types</a>
<a href="Time-Signatures-Bar-Lines.html" style="border-top: solid silver;">Time Signatures and Bar Lines</a>
<a href="Beaming-Notes.html" style="border-top: solid silver;">Beaming Notes</a>
<a href="Note-Names.html" style="border-top: solid silver;">Note Names</a>
<a href="Rests.html" style="border-top: solid silver;">Rests</a>
<a href="Accidentals.html" style="border-top: solid silver;">Accidentals</a>
<a href="Dots-Ties.html" style="border-top: solid silver;">Dots and Ties</a>
<a href="Semitones-Tones.html" style="border-top: solid silver;">Semitones and Tones</a>
<a href="Scales.html" style="border-top: solid silver;">Scales</a>
<a href="Key-Signatures.html" style="border-top: solid silver;">Key Signatures</a>
<a href="Degrees.html" style="border-top: solid silver;">Degrees</a>
<a href="Intervals.html" style="border-top: solid silver;">Intervals</a>
<a href="Triads.html" style="border-top: solid silver;">Triads</a>
<a href="Foreign Terms.html" style="border-top: solid silver;">Foreign Terms</a>        
</div>
<button class="accordion">Grade 2</button>
<div class="panel">
Coming Soon
</div>                  
</div>

CSS：

#sidebar {
padding-left:5px;
float: left;
width: 200px;
z-index: 1;
overflow-x: hidden;
overflow-y: auto;
height:100%;
border-radius: 20px;
border-top-left-radius:0px;
border-top-right-radius:0px;
font-family: 'Annie Use Your Telescope';
font-size: 18px;
font-weight: bold;
letter-spacing: 1.5px;
}
.accordion {
background-color: rgb(213,218,255);
color:black;
cursor: pointer;
padding: 15px 8px 15px 16px;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
width: 100%;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
width: 100%;
font-size: 16px;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
border-radius: 20px;
}
.sticky + .content {
padding-top: 60px;
}

Javascript：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
} 
});
}

window.onscroll = function() {myFunction()};
var navbar = document.getElementById("sidebar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}

该代码目前正在一个实时网站上使用，因此您可以查看该代码以便于使用。唯一不可见的是一些侧边栏内容和css，因为它们在单独的文件中。最好签出的页面是http://learningmusictheory.co.uk/index.html-点击侧边栏中的1年级，并尝试向下滚动；和http://learningmusictheory.co.uk/Note-Types.html-点击侧栏中的1级，你必须向下滚动主窗口，直到侧边栏变成粘性，然后滚动侧边栏链接。

非常感谢您抽出时间。

Answer 1

这似乎有效，它检查菜单中的任何一个"面板"的高度值是否大于#main contentdiv，如果是，它将忽略函数的原始部分的其余部分：

function myFunction() {
if ((document.getElementsByClassName("panel")[0].clientHeight || document.getElementsByClassName("panel")[1].clientHeight) > document.getElementById("main-content").clientHeight){
return;
} else {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")    
} else {
navbar.classList.remove("sticky");
}
}
}