Javascript 仅显示宽度低于1000px的两个标题元素中的一个_Javascript_Html_Wordpress

Javascript 仅显示宽度低于1000px的两个标题元素中的一个

javascript html wordpress

Javascript 仅显示宽度低于1000px的两个标题元素中的一个,javascript,html,wordpress,Javascript,Html,Wordpress,我试图在WordPress主题中现有的标题下添加一个额外的菜单栏。我通过插入原始HTML代码（一些主题允许您这样做），实现了我的菜单，还使用了标题标记。但它应该仅在视口宽度小于1000px时可见我很想通过媒体查询来实现这一点，但问题是我的菜单和现有菜单都使用标题标记，因此我的CSS规则会将两个菜单都隐藏在1000px的视口宽度以下不管怎样，这是我使用的代码。有没有人注意到什么，为什么这不起作用功能切换\u可见性（.scroll nav down）{ var screen_width=win

我试图在WordPress主题中现有的

标题下添加一个额外的菜单栏。我通过插入原始HTML代码（一些主题允许您这样做），实现了我的菜单，还使用了标题
标记。但它应该仅在视口宽度小于1000px时可见
我很想通过媒体查询来实现这一点，但问题是我的菜单和现有菜单都使用标题
标记，因此我的CSS规则会将两个菜单都隐藏在1000px的视口宽度以下
不管怎样，这是我使用的代码。有没有人注意到什么，为什么这不起作用
功能切换\u可见性（.scroll nav down）{
var screen_width=window.innerWidth；
如果（屏幕宽度你可能需要这样的东西。
诀窍是为resize事件添加事件监听器，否则您的函数只会被调用一次

功能切换_可见性（）{
var screen_width=window.innerWidth；
如果（屏幕宽度）当你说“它应该只在1000px以下可见”时，你的意思是附加菜单应该只在宽度小于1000px的屏幕上可见吗？另外，“代码中使用的standart标记也在主题中使用”是什么意思mean？。向下滚动导航是无效的ID，当然也不能没有引号。您可能是指使用var ele=document.getElementById（passedID）；将ID传递给函数，然后在调用它时将ID传递给函数为什么使用JavaScript？这可以通过CSS完成“我喜欢用一个媒体查询来做这件事，但问题是，代码中使用的标准标记也在主题中使用。”——不真正理解这里的意思。请考虑使用媒体查询监听器在特定宽度下或低于或高于某个宽度运行JS。
<!DOCTYPE html>
<html>
<head>
<style>
body {
    padding-top: 40px;
}
#headerdiv {
  height: 40px;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
}
.scroll-nav-up {
  top: -40px;
}
@media (min-width: 1000px) {
  #headerdiv {
    display:none;
  }
}
main {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
  height: 2000px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var ScrollNav = function(elem, delta) {
    this.m_Delta = delta;
    this.m_LastScrollTop = 0;
    this.m_Element = elem;
    $(window).on("scroll", null, {ScrollNav: this}, this.OnWindowScroll);
};

ScrollNav.prototype.OnWindowScroll = function(e) {

    var scrolledTop = $(window).scrollTop();
    var Nav = e.data.ScrollNav;

    if(Math.abs(Nav.m_LastScrollTop - scrolledTop) <= Nav.m_Delta) {
        return;
    }

    if(scrolledTop > Nav.m_LastScrollTop && scrolledTop > $(Nav.m_Element).outerHeight()) {
        $(Nav.m_Element).removeClass('scroll-nav-down').addClass('scroll-nav-up');
    } else if(scrolledTop + $(window).height() < $(document).height()) {
        $(Nav.m_Element).removeClass('scroll-nav-up').addClass('scroll-nav-down');
    }

    Nav.m_LastScrollTop = scrolledTop;
}
// HOW TO USE!
var scroll = null;
$(document).ready(function() {
    // new ScrollNav('ZielElement', Delta);
    scroll = new ScrollNav('headerdiv', 5);
});
</script>




<body>
  <header id="headerdiv" class="scroll-nav-down">
    This is your menu.
  </header>
  <main>
    This is your body.
  </main>
</body>
</html>