僅顯示寬度低於 1000 像素的兩個標題元素之一

Question

我正在嘗試在 WordPress 主題中的現有header下方添加一個額外的菜單欄。 我通過插入原始 HTML 代碼（某些主題允許您這樣做）來實現我的菜單，也使用header標記。 但它應該只在視口寬度小於 1000 像素時可見。

我很想用媒體查詢來做到這一點，但問題是我的菜單和現有菜單都使用header標簽，所以我的 CSS 規則會將兩個菜單隱藏在 1000 像素的視口寬度以下。

無論如何，這是我正在使用的代碼。 有沒有人注意到任何事情，為什么這不起作用？

function toggle_visibility(.scroll-nav-down) {
  var screen_width = window.innerWidth;
  if (screen_width <= 1000) {
    // Screen is smaller than (or equal to) 1000px
    var e = document.getElementById(.scroll-nav-down);
    if (e.style.display == 'block') {
      e.style.display = 'none';
    } else {
      e.style.display = 'block';
    }
  } else {
    // do something if it's larger
    e.style.display = 'none';
  }

編輯：我真的很努力重新開始使用 css。 我正在嘗試使用媒體查詢解決方案，但我遇到了問題。 我想它是而不是只有 . 但是，如果我刪除並將其更改為，我就會搞亂一個朋友前段時間寫給我的 JavaScript。 是的，我根本不喜歡 JavaScript。 所以這是整個代碼，也許它有助於解決我的問題...... - >我只為圖像添加了部分，以演示效果。

注意：如果您將“#headerdiv”的 css 更改為簡單的“header”，並且在最后一行 JavaScript 中將“headerdiv”更改為簡單的“header”，則代碼將正常工作。 但不會在 1000px 寬度下消失。

<!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>

Answer 1

你可能需要這樣的東西。 訣竅是為 resize 事件添加事件偵聽器，否則您的函數將只被調用一次。

 function toggle_visibility() { var screen_width = window.innerWidth; if (screen_width <= 1000) { // Screen is smaller than (or equal to) 1000px var e = document.getElementById('scroll-nav-down'); if (e.style.display == 'block') { e.style.display = 'none'; } else { e.style.display = 'block'; } } else { // do something if it's larger e.style.display = 'none'; } } document.addEventListner('resize', toggle_visibility);

僅顯示寬度低於 1000 像素的兩個標題元素之一

問題描述

1 個解決方案

解決方案1
0 2020-01-19 17:37:14

僅顯示寬度低於 1000 像素的兩個標題元素之一

問題描述

1 個解決方案

解決方案1 0 2020-01-19 17:37:14

解決方案1
0 2020-01-19 17:37:14