Sticky header

by Rahul Khan

HTML

<body>
      <header>
          <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Shop</li>
          </ul>
        </div>
      </header>
      <div class="newswrap">
        <div class="gamenews">
            <h4> This should stick when page is scrolled down upto 300px after that it should also hide</h4>
        </div>
      </div>
      <div class="row">
        <div class="main">
          <div class="content">
            <h2>This is content area</h2>
          </div>
        </div>
        <aside>
          <div class="sidebar">
            <div class="firstwidget">
              <h2>This is first widget</h2>
            </div>
            <div class="secondwidget">
              <h2>This is second widget</h2>
            </div>
            <div class="thirdwidget">
              <h2>This is third widget</h2>
            </div>
            <div class="fourthwidget">
              <h2>This is fouth widget</h2>
            </div>
            <div class="fiftwidget">
              <h2>This is fifth widget</h2>
            </div>
          </div>
        </aside>
      </div>
    </body>

CSS

.logowrap {
      background: rgba(85, 85, 85, 0.56);
    }
header ul {
    list-style: none;
    background: #111;
    line-height: 70px;
    color: #e1e1e1;
}
header ul li {
    display: inline;
    padding: 0 20px;
}
    .logowrap img {
      max-width: 200px;
      display: block;
      margin: 0 auto;
    }

    .logowrap li {
      display: inline;
      margin: 20px;
      color: #fff;
      line-height: 60px;
      font-size: 16px;
      text-transform: uppercase;
    }

    header {
      position: sticky;
      top: 0;
    }

    .logowrap ul {
      background: #555;
      text-align: center;
      -webkit-margin-before: 0;
    }

    .main {
      width: 60%;
      float: left;
      padding: 60px 5%;
    }

    aside {
      width: 30%;
      float: left;
    }

    .sidebar h2 {
      text-align: center;
    }

    body {
      margin: 0 10px;
      background: #f3f3f3;
      font-family: monospace;
    }

    .sidebar div {
      display: flex;
      min-height: 600px;
      justify-content: center;
      align-items: center;
    }

    .firstwidget {
      background: red;
    }

    .secondwidget {
      background: rgba(255, 0, 0, 0.60);
    }

    .thirdwidget {
      background: rgba(255, 0, 0, 0.45);
    }

    .fourthwidget {
      background: rgba(255, 0, 0, 0.30);
    }

    .fiftwidget {
      background: rgba(255, 0, 0, 0.15);
    }

    .main {
      background: lime;
    }

    .row {
      display: flex;
    }