代码之家  ›  专栏  ›  技术社区  ›  MD.ALIMUL Alrazy

为什么我不能用JavaScript设置导航栏的高度?[关闭]

  •  0
  • MD.ALIMUL Alrazy  · 技术社区  · 6 年前

    我想知道如何编写一个粘性 navbar 使用HTML、CSS和JS。我创建了没有jQuery的粘性导航,但是 height 功能工作不正常。有人能告诉我怎么称呼这个吗 高度 功能?我怎么能找到 高度 纯JavaScript?

    document.addEventListener("DOMContentLoaded", function() {
      'use strict';
      var c, currentScrollTop = 0;
      var navbar = document.querySelector(".nav");
      window.addEventListener('scroll', function() {
        var a = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        var b = navbar.hight();
        currentScrollTop = a;
        if (c < currentScrollTop && a > b + b) {
          navbar.addClass("scrollUp");
        } else if (c > currentScrollTop && !(a <= b)) {
          navbar.removeClass("scrollUp");
        }
        c = currentScrollTop;
      });
    });
    <nav>
      <div class="container">
        <a href="#" id="brand">Brand</a>
        <button>
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul class="navbar-menu">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Team</a>
          </li>
          <li>
            <a href="#">Timeline</a>
          </li>
          <li>
            <a href="#">Conact</a>
          </li>
        </ul>
      </div>
    </nav>
    1 回复  |  直到 6 年前
        1
  •  2
  •   Wais Kamal    6 年前

    nav 不是一个类。它是一个HTML标记。因此, document.querySelector(".nav") 将返回空节点列表。

    改变

    document.querySelector(".nav")
    
    var b = navbar.height();
    

    document.querySelector("nav")
    
    var b = navbar.clientHeight;
    // or
    var height = navbar.offsetHeight;
    

    document.addEventListener("DOMContentLoaded", function() {
      'use strict';
      var c, currentScrollTop = 0;
      var navbar = document.querySelector("nav");
      window.addEventListener('scroll', function() {
        var a = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        var b = navbar.clientHeight
        currentScrollTop = a;
        if (c < currentScrollTop && a > b + b) {
          navbar.addClass("scrollUp");
        } else if (c > currentScrollTop && !(a <= b)) {
          navbar.removeClass("scrollUp");
        }
        c = currentScrollTop;
      });
    });
    <nav>
      <div class="container">
        <a href="#" id="brand">Brand</a>
        <button>
          <span></span>
          <span></span>
          <span></span>
        </button>
    
        <ul class="navbar-menu">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Team</a>
          </li>
          <li>
            <a href="#">Timeline</a>
          </li>
          <li>
            <a href="#">Conact</a>
          </li>
        </ul>
      </div>
    </nav>