Cách để hiển thị thành phần React trên cuộn

Question

Tôi đã tạo thành phần React cho một nav cố định mà tôi muốn giữ nguyên, cho đến khi tôi cuộn qua một điểm nhất định trên trang, sau đó trượt vào xem. Medium có tiêu đề tương tự như nội dung tôi mô tả.

Đây là một nhiệm vụ tương đối tầm thường trong jQuery, với scrollmagic hoặc waypoints nhưng có cách nào thành ngữ để hoàn thành điều này với React và vanilla JS không?

Answer 1

Trong móc componentDidMount vòng đời, làm điều tương tự như trong liên kết jQuery bạn đã đưa ra:

class Navbar extends React.component { 

    let delta = 5; 

    render() { 
    return (
     <div ref=header></div> 
    ); 
    } 

    componentDidMount() { 
    $(window).scroll(function(event){ 
     var st = $(this).scrollTop(); 

     if(Math.abs(this.state.lastScrollTop - st) <= delta) 
     return; 

     if (st > lastScrollTop){ 
     // downscroll code 
     // $(this.refs.header).css('visibility','hidden').hover() 
     this.setState({ 
      navbarVisible: false 
     }); 
     } else { 
     // upscroll code 
     $(this.refs.header).css('visibility','visible'); 
     this.setState({ 
      navbarVisible: true 
     }); 
     } 
     lastScrollTop = st; 
    }.bind(this)); 

    } 
} 

Answer 2

Phản ứng Way với vani JS jsfiddle;

đừng quên xóa EventListener. Trong ví dụ này phần sẽ làm nếu chỉ có nó là cần thiết

class TopBar extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state={isHide:false}; 
     this.hideBar = this.hideBar.bind(this) 
    } 
    hideBar(){ 
     let {isHide} = this.state 
     window.scrollY > this.prev? 
     !isHide && this.setState({isHide:true}) 
     : 
     isHide && this.setState({isHide:false}) 

     this.prev = window.scrollY; 
    } 
    componentDidMount(){ 
     window.addEventListener('scroll',this.hideBar); 
    } 
    componentWillUnmount(){ 
     window.removeEventListener('scroll',this.hideBar); 
    } 
    render(){ 
     let classHide=this.state.isHide?"hide":"" 
     return <div className={"topbar "+classHide}>topbar</div>; 
    } 
} 

Answer 3

Bạn có thể sử dụng một thành phần như react-headroom để làm các việc nâng nặng cho bạn. Hoặc, bạn vẫn có thể sử dụng điểm tham chiếu trong React, thiết lập điểm tham chiếu trong componentDidMountlifecycle method và xóa nó bằng cách sử dụng componentWillUnmount.

Answer 4

Tôi đã tạo một thành phần phản ứng cho cùng một nhu cầu chính xác này vì tôi không thể tìm thấy bất kỳ triển khai nào khác khớp với những gì tôi cần. Ngay cả react-headroom cũng không cung cấp cho bạn thứ gì đó sẽ cuộn vào sau khi đạt đến một điểm nhất định trên trang.

Các ý chính là ở đây: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

Tôi không thấy lý do nào để sao chép mã thành phần ở đây. Mã này phần lớn dựa trên mã số react-headroom nhưng ít hơn và do đó đơn giản hơn.

Thành phần là đoạn mã đầu tiên, bạn có thể chỉ cần sao chép/dán rồi nhập. Sau khi nhập mã của bạn với thanh điều hướng sẽ trông giống như sau:

class MyScrollInNavBar extends Component { 
    render() { 
     return (
     <ScrollInNav scrollInHeight={150}> 
      <MyNavBar /> 
     </ScrollInNav> 
    ); 
    } 
}