修复基于滚动 100% 高度的标题答案

【问题标题】：Fix header based on scrolling 100% of the height修复基于滚动 100% 高度的标题
【发布时间】：2019-10-23 18:12:45
【问题描述】：

所以我目前有我的固定标题在滚动上工作，但是我在 jQuery 中为标题的大小设置了高度。现在这个标题的高度可以变化，所以不是在说 105px 的滚动上做它，我怎么能在 100% 高度的滚动上做呢？由于标头可以更改，当前代码将导致固定标头在某些客户端页面上无法顺利运行。

$(window).scroll(function(){            
  if ($(window).scrollTop() >= 105) {
    $('#navigation').addClass('fixed-header');
   }
  else {
    $('#navigation').removeClass('fixed-header');
   }
    });

因此，此代码确实按说明工作。问题是它设置为“105”。我需要根据标题的大小进行更改。而不是一直设置为某个大小。

【问题讨论】：

标签： javascript jquery css height

【解决方案1】：

你必须得到header的高度。

假设header是

<header>stuff</header>

在 JS 中

const header = $("header");

$(window).scroll(function(){            
  if ($(window).scrollTop() >= header.height()) {
    $('#navigation').addClass('fixed-header');
   }
  else {
    $('#navigation').removeClass('fixed-header');
   }
    });

了解element.height(); here

【讨论】：