スクロール時のdivの高さを変更する

Question

私はreactjsを使ってWebアプリケーションをやっています。スクロールしているときにdivの高さを変更して、スクロールしているときに元の高さに戻す必要があります。私が必要とするものに対してCSSだけの解決策があるかどうかはわかりません。上記のことを達成する方法は何ですか？ jQueryのを使用して

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

だから、私はコメントで述べた基本的に好きです。

基本的には、レンダリングのためにスクロールトップが特定のポイントを通過するときに、状態変数+ classNameをトグルする必要があります。ここで

は、ハンドルのスクロール機能があります：スクロール方向を検出するために

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

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

：クラス

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

を切り替えること

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

とレンダー機能は、ここでfiddleです

小さなCSS変更を更新して試すことができます。基本的に、これはこの要件を達成するために従うべき方向でなければなりません。

Answer 2

：

$('.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); 

})