Question

我正在尝试构建一种布局，其中页眉位于顶部，滚动时可以将其折叠。我遇到一个问题，当我开始滚动时，标题折叠，并且滚动位置重置为0，这会使标题扩展，并且每秒发生多次，直到我实际滚动为止。

我正在构建Angular2应用，关键点之一是我的标题具有动态高度。我已经看到很多示例，可以在其中设置标头position: fixed并为margin-top: $headerHeight设置content，但是由于标头具有一个动态高度。我正在考虑的另一种选择是仅使内容可滚动，但是我喜欢这样的行为，即您甚至可以在标题上开始滚动，因为它最初占用我应用程序中视口高度的一半。如果有所作为，我将在项目中使用CSS网格和flexbox，因此仅支持现代浏览器。

我制作了一个Codepen以重现并说明问题： https://codepen.io/darko1002001/pen/eXKYGM

SCSS

#container {
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: green;
  min-height: 200px;
  transition: min-height .2s;
  &.collapsed {
    min-height: 100px;
  }
}

.content {
  height: 1000px;
  background-color: red;
}

HTML

<div id="container">
  <div id="header" class="header">Header</div> 
    <div id="content" class="content">Content</div> 
</div>

JS

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").className = "header collapsed";
  } else {
    document.getElementById("header").className = "header";
  }
}

Answer 1

Change your function to -

function myFunction() {
 if (document.documentElement.scrollTop > 100) {
  if(!document.getElementById("header").classList.contains('collapsed')){
      document.documentElement.scrollTop += 100;
      document.getElementById("header").className = "header collapsed";
    }

   } else {
    if(document.getElementById("header").classList.contains('collapsed')){
      document.getElementById("header").className = "header";
      document.documentElement.scrollTop = 0;
    }
  }
}

You should trigger collapse when scrollTop is more than collapsed header height. In this case it's 100px. If scrollTop is above 100px and header is collapsed, then do nothing. Otherwise, add collapsed to header and scrollTop to +100 to retain its scroll Position. There is still a very tiny skipping when you scroll down, and that is because of transition on height.

Codepen - https://codepen.io/anon/pen/VRdYoM

Answer 2

我找到了一个更好的解决方案。所提出的解决方案在chrome中效果很好，但是在Firefox和Safari中的行为却不是很好。 chrome中似乎有一个简单的修复程序，我在研究错误报告时发现了它。

https://bugs.chromium.org/p/chromium/issues/detail?id=734461

在这种情况下，将overflow-anchor: none;添加到content元素的解决方案就像在Chrome中一样具有魅力，在Safari和Firefox中不会引起问题。不需要用于滚动的Javascript。

.content {
  height: 1000px;
  background-color: red;
  overflow-anchor: none;
}

折叠标头，并在滚动时显示动态高度

2 个答案: