pageYOffsetが反応しない

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

私は本当にリアクトについて多くを知らないが、

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

はないと思えます。あなたは事実の後にそれを結合している理由handleScrollは（）したがって、（ thisが提供する範囲内で定義されていないなどとして、コードは読んでいないはずです。

this.handleScroll = handleScroll.bind(this) 

Answer 2

問題が

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

ました

常に2000pxようstringとして値を返します。しかし、あなたが比較を行うにはintegerすることを必要としています。だから、数字

let deviceWindowHight = deviceWindow.clientHeight 

で高さを取得するには、以下を使用します0

残りは正常に動作するはずです。

チェックこのフィドルhttp://jsfiddle.net/Pranesh456/0ycfru3n/15/ こんにちは、これはES6の構文ではありませんので、それと間違って何もコンソール