更改滚动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的高度

回答

相关问题