Javascript var 不应用 ul 的高度作为值

Question

所以我制作了一个脚本，当我的导航栏在其下方滚动时，它会保持在顶部。问题是我的内容由于导航栏的固定属性而变得可用，因此我的内容“跳跃”了。现在我尝试修复它，当我通过 JS/JQuery 给它一个 % 或 px 值时它起作用了。但是一旦我尝试给它适当的值，也就是导航栏的高度，就再也没有用了。所以我想声明一定是我们错了还是我在某处遗漏了 .toString() ？谢谢。

请注意，#Nav 是 ul 的高度，而不是 div，以防万一。

$(document).ready(function() {
  var stickyNavTop = $('#Nav').offset().top; //var = space between Navbar and top of the page

  var stickyNav = function() {
    var scrollTop = $(window).scrollTop(); //var = top of viewport where the user currently is.
    var NavbarHeight = document.getElementById('#Nav').clientHeight; //var = height Navbar
    if (scrollTop > stickyNavTop) {
      $('#Nav').addClass('FixedNav'); //adds class 
      $('#Content').css("margin-top", NavbarHeight); //edits class
    } else {
      $('#Nav').removeClass('FixedNav'); //removes class
      $('#Content').css("margin-top", "auto"); //edits class
    }
  };

  stickyNav();

  $(window).scroll(stickyNav());
});

Answer 1

有可能您使用的是 ul 而不是 div 容器 - 如果您的 ul 包含 float < strong>li 元素然后是高度:

float 元素的容器缩小，以便其他内联元素围绕它流动(根据规范)。

参见:Why for li with style float:left browser evaluates the height of the ul element to 0?

尝试向 ul 添加明确的高度(例如:height: 152px;)或 overflow:hidden; 让浏览器正确计算 ul 的高度。

编辑:根据您的评论，该脚本仅在 margin-top 设置为 10% 时才有效，我认为我在这里走在正确的轨道上。希望对你有帮助。