Javascript 滚动时更改div的高度

我正在使用reactjs做一个web应用程序。我需要在向下滚动时更改div的高度，在向上滚动时恢复到原始高度。我不确定是否有一个CSS唯一的解决方案来满足我的需要。实现上述目标的方法是什么

class InternalGroupsPage extends Component {
     constructor() {
     super();
}

render() {

return (
         <div className="body_clr">

            <div className="group_page_header">
                    This is the div i want to change the height when scrolling
            </div>

            <div>
                    Other stuff
            </div>
         </div>

        );
    }
}

---

所以，基本上就像我在评论中提到的

基本上，当scrollTop通过某个点时，您需要切换状态变量+类名，以便重新启动程序

以下是手柄滚动功能：

handleScroll(event) {
      var scrollTop = event.srcElement.body.scrollTop;
      var isScrollUp = this.getScrollDirection();

      if(isScrollUp) {
        this.setState({
          hideHeader: true,
        });
      } else {
        this.setState({
          hideHeader: false,
        });
      }
  };

要检测滚动方向，请执行以下操作：

getScrollDirection() {
    var currentScrollTop = document.body.scrollTop;
    var isScrollUp = currentScrollTop < this.previousScrollTop;
    this.previousScrollTop = currentScrollTop;
    return isScrollUp;
  }

getScrollDirection（）{
var currentScrollTop=document.body.scrollTop；
var isScrollUp=currentScrollTop

以及用于切换类的渲染函数

 render() {
    var headerClassName = this.state.hideHeader ? `group_page_header hideHeader` : `group_page_header showHeader`;
    console.log('classNAme ->', headerClassName)
    return (
      <div className="body_clr">
        <div className={headerClassName}>
        This is the div i want to change the height when scrolling
        </div>
        <div className="other-stuff">
          Other stuff
        </div>
      </div>
    );
  }

render（）{
var headerClassName=this.state.hideHeader？`group\u page\u header hideHeader`:`group\u page\u header showHeader`；
console.log（'classNAme->'，headerClassName）
返回(
这是我想要在滚动时更改高度的div
其他东西
);
}

这里是

---

您可以更新您的小css更改并尝试它。基本上，这应该是你达到这个要求应该遵循的方向。

所以，基本上就像我在评论中提到的那样

基本上，当scrollTop通过某个点时，您需要切换状态变量+类名，以便重新启动程序

以下是手柄滚动功能：

handleScroll(event) {
      var scrollTop = event.srcElement.body.scrollTop;
      var isScrollUp = this.getScrollDirection();

      if(isScrollUp) {
        this.setState({
          hideHeader: true,
        });
      } else {
        this.setState({
          hideHeader: false,
        });
      }
  };

要检测滚动方向，请执行以下操作：

getScrollDirection() {
    var currentScrollTop = document.body.scrollTop;
    var isScrollUp = currentScrollTop < this.previousScrollTop;
    this.previousScrollTop = currentScrollTop;
    return isScrollUp;
  }

getScrollDirection（）{
var currentScrollTop=document.body.scrollTop；
var isScrollUp=currentScrollTop

以及用于切换类的渲染函数

 render() {
    var headerClassName = this.state.hideHeader ? `group_page_header hideHeader` : `group_page_header showHeader`;
    console.log('classNAme ->', headerClassName)
    return (
      <div className="body_clr">
        <div className={headerClassName}>
        This is the div i want to change the height when scrolling
        </div>
        <div className="other-stuff">
          Other stuff
        </div>
      </div>
    );
  }

render（）{
var headerClassName=this.state.hideHeader？`group\u page\u header hideHeader`:`group\u page\u header showHeader`；
console.log（'classNAme->'，headerClassName）
返回(
这是我想要在滚动时更改高度的div
其他东西
);
}

这里是

---

您可以更新您的小css更改并尝试它。基本上，这应该是你达到这个要求应该遵循的方向。

你的react组件代码在哪里？我只给出了html和css，因为我认为没有其他代码是必要的。无论如何，我现在已经更新了。如果你能提供我一把小提琴，上面的代码可以工作，我可以为你做。基本上，当

scrollTop

通过某个特定点时，您需要切换状态变量+类名，以便重新启动程序。有意义吗？你的react组件代码在哪里？我只给出了html和css，因为我认为其他代码是不必要的。无论如何，我现在已经更新了。如果你能提供我一把小提琴，上面的代码工作，我可以为你做。基本上，当

scrollTop

通过某个特定点时，您需要切换状态变量+类名，以便重新启动程序。有道理吗？我就像你在这里一样。但状态不会在scroll上改变。当滚动时，console.log仅打印组\页面\标题showHeader。@CrazHydroid我需要您的代码来解释更多内容。基本上，我假设我提供的答案是你想要的？我想要这样的@CraZyDroiD告诉你，你可以根据需要更新css。检查更新的fiddle链接-我使用了你的代码，在某种程度上它可以工作。但是，隐藏者有什么用呢？即使我删除了那个类，它也能工作。当我使用你的代码，而不是减少页眉高度时，我的代码会在滚动时消失。但状态不会在scroll上改变。当滚动时，console.log仅打印组\页面\标题showHeader。@CrazHydroid我需要您的代码来解释更多内容。基本上，我假设我提供的答案是你想要的？我想要这样的@CraZyDroiD告诉你，你可以根据需要更新css。检查更新的fiddle链接-我使用了你的代码，在某种程度上它可以工作。但是，隐藏者有什么用呢？即使我删除了那个类，它也能工作。当我使用你的代码，而不是减少标题高度，我的消失时，滚动。