修复 header 基于滚动 100% 的高度

Question

所以我目前有我固定的 header 在滚动上工作，但是我在 jQuery 中设置了一个高度，用于 header 的大小。现在这个 header 的高度可以变化，所以与其在 105px 的滚动条上做，不如在 100% 高度的滚动条上做呢？由于 header 可以更改，当前代码将导致固定的 header 在某些客户端页面上无法正常工作。

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

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

Answer 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

修复 header 基于滚动 100% 的高度

Fix header based on scrolling 100% of the height

javascript

jquery

css

height