更改滾動div的高度

我正在使用reactjs做一個web應用程序。當我向下滾動時，需要更改div的高度，並在滾動時恢復到原始高度。我不確定是否有我需要的CSS解決方案。什麼是實現我上面描述的方式。更改滾動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

如果你能爲我提供上述代碼工作的小提琴，我可以爲你做。基本上你需要切換一個狀態變量+ className，當'scrollTop'通過一個特定的點來重新發生。有道理嗎？ –

所以，基本上就像我在註釋中。

基本上你需要切換一個狀態變量+ className，當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; 
    }

而且渲染功能來切換類

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

使用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); 

})

來源

2017-03-06 09:54:22 Fabio

更改滾動div的高度

回答

相關問題