스크롤 할 때 div 높이 변경

reactjs를 사용하여 웹 응용 프로그램을 만들고 있습니다. 그리고 스크롤 할 때 div의 높이를 변경해야하고 스크롤 할 때 원래 높이로 복원해야합니다. 내가 필요한 것에 CSS 전용 솔루션이 있는지 확실하지 않습니다. 위에 설명한 내용을 달성하는 방법은 무엇입니까? jQuery를 사용하여스크롤 할 때 div 높이 변경

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; 

}

출처

2017-03-06 CraZyDroiD

반응 성분 코드는 어디에 있습니까? –

나는 다른 코드가 필요하다고 생각하지 않아서 html과 css만을 제공했다. 어쨌든 나는 지금 업데이트했다. – CraZyDroiD

위의 코드가 작동하는 바이올린을 제공 할 수 있다면, 나는 그것을 할 수있다. 기본적으로'scrollTop'이 rerender가 발생하기 위해 특정 지점을 지나갈 때 상태 변수 + className을 토글해야합니다. 의미가 있습니까? –

그래서, 내가 코멘트에서 언급 기본적으로 같은.

기본적으로 스크롤 탑이 재 렌더링을 위해 특정 지점을 통과 할 때 상태 변수 + 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 변경 사항을 업데이트하여 사용해 볼 수 있습니다. 기본적으로이 요구 사항을 달성하기 위해 따라야하는 방향이어야합니다.

출처

2017-03-07 06:02:06

내가 여기서 한 것처럼. 그러나 국가는 두루마리에 변화하지 않을 것이다. 스크롤 할 때 console.log는 group_page_header showHeader 만 인쇄합니다. – CraZyDroiD

@CraZyDroiD 자세한 설명을 위해 귀하의 코드가 필요합니다. 기본적으로 내가 제공 한 대답이 당신이 원하는 대답이라고 가정하고 있습니까? –

내가 좋아하는 것 : http://callmenick.com/_development/resize-header-on-scroll/ – CraZyDroiD

-1

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

})

출처

2017-03-06 09:54:22 Fabio

스크롤 할 때 div 높이 변경

답변

관련 문제