Javascript 粘性侧边栏手风琴赢得'；不要适当地滚动

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

这样做的目的是使侧边栏永久存在，但直到用户向下滚动到标题下方，侧边栏才占据整个屏幕。如果用户打开一个手风琴菜单，并且菜单需要一个滚动条，那么边栏上应该会出现一个单独的滚动条

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

代码如下：

HTML:

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");
    }
}

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

该代码目前正在一个实时网站上使用，因此您可以查看该代码以便于使用。唯一看不见的是一些侧边栏内容和css，因为它们位于不同的文件中。要查看的最佳页面是-单击侧边栏中的grade 1并尝试向下滚动；然后-点击侧栏中的grade 1，您必须向下滚动主窗口，直到侧栏变为粘滞状态，然后滚动侧栏链接

---

感谢您的时间，非常感谢。

这似乎可行，它会检查菜单中的任一“面板”的高度值是否大于#main content div，如果是，它会忽略函数原始部分的其余部分：

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");
       }
    }

 }

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");
    }
}

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");
       }
    }

 }