React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.sticky-wrap {
  position: relative;
  background: #ddd;
  height: 1200px;
  padding: 5px;
}

.sticky {
  position: sticky;
  top: 0;
  padding: 10px;
  background: white;
}

.empty-space {
  height: 100px;
  
  &.large {
    height: 1200px;
  }
}

React

function App() {
	return (
  	<div>
  	  <div className='empty-space'>
  	    not sticky
  	  </div>
  	
      <div className='sticky-wrap'>
        <div className='sticky'>
          sticky
        </div>

        children
      </div>
  	  <div className='empty-space large'>
  	    not sticky
  	  </div>
    </div>
  );
}


ReactDOM.render(<App />, document.querySelector("#app"))