scroll-2353

by M Rahul Reddy

HTML

<div id="app">
  <div id="header" ref="header">
    Header content
  </div>
  <div id="container">
    <div id="sidebar" ref="sidebar">
      Sidebar content
    </div>
    <div id="content" ref="content">
      Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content
      Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content
      Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content
      Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content
      <p> Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content </p>
      <p> Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content </p>
      <p> Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content </p>
      Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content
      Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage content
    </div> 
  </div>
<!--   <div id="footer" ref="footer">
    Footer content
  </div>   -->
</div>

CSS

body {
  padding: 0;
  margin: 0;
}
#app {
  overflow: auto;
  height: 100vh;
}
#header {
  background: blue;
  width: 100%;
  height: 40px;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  color: white;
}
#container {
  display: inline-flex;
}
#sidebar {
  position: sticky;
  background: green;
  width: 200px;
  height: calc(100vh - 20px);
  top: 40px;
  left: 0;
  color: white;
  flex-grow: 0;
  flex-shrink: 0;
}

#content {
  background: #555;
  height: 200vh;
  width: 200vw;
  background: linear-gradient(135deg, #cc2, #a37);
  flex-grow: 0;
  flex-shrink: 0;
}
#footer {
  background: #000;
  height: 100px;
  z-index: 100;
  left: 0;
  position: sticky;
  color: white;
}