Question

我正在使用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>

        );
    }
}

CSS

.group_page_header {

    width: 100%;
    height: 220px;
    background-color: #0b97c4;
    position: fixed;
    margin-top: 50px;
    z-index: 1;

}

.body_clr {

    overflow-y: scroll;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #eceff1;

}

Answer 1

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

基本上，当scrollTop通过某个点以使重新渲染发生时，您需要切换状态变量+ className。

这是句柄滚动功能：

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;
  }

用于切换类的渲染函数

 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>
    );
  }

以下是fiddle

您可以更新小型css更改并进行试用。基本上这应该是你应该遵循的方向来达到这个要求。

Answer 2

使用JQuery：

$('.body_clr').scroll( function() {

    var topPos = $(this).scrollTop();

    var calcheight = 0; // use this variable to calculate the height of the div based on topPos

    $('.group_page_header').height( calcheight );

})

在滚动时更改div的高度

2 个答案: