title: How to dynamically render an element after scrolling to a certain position in a page?
body: <p>I would like my "emailForm" component to render on my Navbar after user scrolled to beginning of "laundry section", does someone know how to do that? </p>
  
  <p>I tried <code>{window.scrollY &gt; 500px ? EmailForm : "" }</code>
  But it doesn't work, I am not very familiar yet with react so maybe you could help me figure out the right method to achieve it?</p>
  
  <p>Container: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  import React, {Component} from 'react';
  
  
  // Components
  import Section from '../components/styledComponents/section';
  import EmailForm from "../components/emailForm"
  import Navbar from './containers/navbar';
  
  export default class Individuals extends Component {
  
  
   render() {
    const { iconStyle } = this;
    return (
        &lt;NavBar/&gt;
     &lt;main className="individuals"&gt;
      {/*Header section*/}
      &lt;Section height="100vh" usedScreen="84px" className="your-laundromat-connected"&gt;
         &lt;div className="title"&gt;
          &lt;h1&gt;
           Title&lt;/span&gt;.
          &lt;/h1&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="subscribe-container"&gt;
        &lt;div className="catchphrase-input"&gt;Prévenez-moi :&lt;/div&gt;
        &lt;EmailForm/&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/Section&gt;
  
      {/*Laundry section*/}
      &lt;div className="container-laverie"&gt;
      &lt;h2&gt;Votre temps est précieux. Utilisez-le autrement.&lt;/h2&gt;
                  &lt;p&gt;Finie l'attente interminable à la laverie... grâce à l'application Lavigo vous reprenez le contrôle sur votre emploi du temps.&lt;/p&gt;
       {/* &lt;/div&gt;  */}
      &lt;/div&gt;
     &lt;/main&gt;
  
    );
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>NavBar component:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  import React from 'react';
  import INavbarState from '../containers/interfaces/Inavbar';
  //Librairies
  import $ from 'jquery'
  import EmailForm from '../components/emailForm'
  
  
  export default class Individuals extends React.PureComponent&lt;{}, INavbarState | any&gt; {
   constructor(props: INavbarState | any) {
    super(props);
    this.state = {
      showMenu: false,
      scrollTop: true
    };
   }
  
   componentDidMount() {
    const that = this;
    let $win = $(window);
   
    $win.scroll(function () {
      if ($win.scrollTop() == 0) {
     if (!that.state.scrollTop) {
       that.setState({ scrollTop: true })
     }
      } else {
     if (that.state.scrollTop) {
       that.setState({ scrollTop: false })
     }
      }
    });
  
    if(window.innerWidth &lt;= 1024)
    {
      that.setState({showMenu:false})
     // hide menubar
    }else{
      that.setState({showMenu:true})
       // show menubar
    }
  
     window.onresize = function(event:any) {
    if(window.innerWidth &lt;= 1024)
    {
      that.setState({showMenu:false})
     // hide menubar
    }else{
      that.setState({showMenu:true})
       // show menubar
    }
  
      if (window.scrollY &gt; 1000) {
  
      }  
     };
  
  
  
     ontoggle = () =&gt; {
    if(window.innerWidth &lt;= 1024)
      {
     this.setState({ showMenu: !this.state.showMenu })
       // hide menubar
      }else{
     this.setState({showMenu:true})
      // show menubar
      }
     }
   }
  
   render() {
   return (
    &lt;nav className="nav"&gt;
     &lt;div className="d-flex align-items-center"&gt;
      &lt;div className="container-email"&gt;
      &lt;EmailForm/&gt; 
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/nav&gt;
   );
    };
  }</code></pre>
  </div>
  </div>
  </p>