Question

我目前正在尝试整理一个粘滞滚动的响应式菜单。我在w3schools找到了两段JavaScript。他们各自应做的事情，但是当我将它们放在一起时，它们似乎会互相干扰。发生的是菜单粘滞，但是当菜单折叠到“汉堡”图标（较小的窗口宽度）时，单击该菜单不会出现。有人可以指出我要解决这个问题的方向吗？

我非常感谢我能提供的任何帮助，希望我的解释是有意义的。非常感谢你！

这些是脚本：

#include <iostream>
class testClass
{
    public:
    int classNum;
    testClass(int _num) : classNum(_num) {}
    void testFunction(int _num) { std::cout << _num + classNum << "\n"; }
};

int main()
{
    testClass instance(3);

    void(*function)(int) = (&testClass::testFunction); // edit: this is wrong, but "&test::testFunction" is the information provided nonetheless
    void* instancePtr = (void*)&instance;

    // can we call "testFunction(3)" on "instance" with only "function" and "instancePtr"?
}

这是菜单：

//Show menu content on click

function myFunction() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
      x.className += " responsive";
   } 
   else {
      x.className = "topnav";
   }
}


//Menu sticky on scroll

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

var header = document.getElementById("myTopnav");
var sticky = header.offsetTop;

function myFunction() {
   if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
   } 
   else {
      header.classList.remove("sticky");
   }
}

这是样式：

<div class="topnav" id="myTopnav">
    <a href="#home" class="active">HOME</a>
    <a href="#menu2">Menu2</a>
    <a href="#menu3">Menu3</a>
    <a href="#menu4">Menu4</a>
    <a href="#menu5">Menu5</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
       <i class="fa fa-bars"></i>
    </a>
</div>

响应式粘滞菜单javascript干扰

0 个答案: