Question

我有一个全屏登录页面，我想知道该屏幕何时完全滚动，因此我可以引入并修复navbar。我正在努力获得设备/窗口的高度，但我无法触发pageYOffset。

这是我的代码：

export default class NavbarComp extends Component {
  constructor() {
   super();
   this.state = {
    windowHight:"",
    navbarfix: ""
  };
  this.handleScroll = this.handleScroll.bind(this)
  }

getWindowHight(){
 let deviceWindow = document.getElementById('landing-section');
 let deviceWindowHight = window.getComputedStyle(deviceWindow).getPropertyValue('height');

console.log("from getinitiatlhight" + deviceWindowHight);

this.setState({
  windowHight: deviceWindowHight
  });
}

componentDidMount(){
 window.addEventListener('scroll', this.handleScroll);
 this.getWindowHight();
}

handleScroll() {
 console.log("scrolll" + this.state.windowHight);
 if (window.pageYOffset >= this.state.windowHight) {
  console.log("fix");
 } else if (window.scrollY < this.state.windowHight) {
  console.log("unfix" );
 }
}

Answer 1

我对React并不是很了解，但是

this.handleScroll = this.handleScroll.bind(this)

似乎不对。 handleScroll（）没有在this提供的范围内定义（因此，为什么你会在事后绑定它。因此，不应该读取代码：

this.handleScroll = handleScroll.bind(this)

Answer 2

问题是

window.getComputedStyle(deviceWindow).getPropertyValue('height');

始终将值返回为string 2000px。但是，您需要将其作为integer进行比较。因此，使用以下内容获取数字高度

let deviceWindowHight = deviceWindow.clientHeight

其余的应该可以正常工作。

检查这个小提琴http://jsfiddle.net/Pranesh456/0ycfru3n/15/ 别忘了打开控制台

pageYOffset在React中不起作用

2 个答案: