[英]Changing height of a div on scrolling
I'm doing a web application using reactjs. 我正在使用reactjs做一个Web应用程序。 And I have a need of changing the height of a div when I'm scrolling down and restore to the original height when I'm scrolling up. 而且,我需要在向下滚动时更改div的高度,并在向上滚动时恢复到原始高度。 I'm not sure if there's a CSS only solution to what I need. 我不确定是否有我需要的仅CSS解决方案。 What's the way of achieving what i have described above. 实现上述目标的方式是什么?
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 的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;
}
So, basically like I mentioned in the comment. 因此,基本上就像我在评论中提到的那样。
Basically you need to toggle a state variable + className when the scrollTop passes a certain point for the rerender to happen. 基本上,当scrollTop通过某个点以进行重新渲染时,您需要切换状态变量+ className。
Here's the handle scroll function: 这是手柄滚动功能:
handleScroll(event) {
var scrollTop = event.srcElement.body.scrollTop;
var isScrollUp = this.getScrollDirection();
if(isScrollUp) {
this.setState({
hideHeader: true,
});
} else {
this.setState({
hideHeader: false,
});
}
};
To detect the scroll direction: 要检测滚动方向:
getScrollDirection() {
var currentScrollTop = document.body.scrollTop;
var isScrollUp = currentScrollTop < this.previousScrollTop;
this.previousScrollTop = currentScrollTop;
return isScrollUp;
}
And the render function to toggle the classes 和render函数来切换类
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>
);
}
You can update your small css changes and try it out. 您可以更新小的CSS更改并尝试一下。 Basically this should be the direction you should be following to attain this requirement. 基本上,这应该是您达到此要求所应遵循的方向。
Using JQuery: 使用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 );
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.