JSFiddle - React, Tailwind, and code Playground

by saidulu401

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Side Navbar -->
      <div class="container">
        <div class="row">
          <!--left-->
          <div class="col-md-3" id="leftCol">
            <ul class="nav nav-stacked" id="sidebar">
              <li>
                <div id="sideBarLogo">
                  <a href="#">
                    <img class="img-responsive" style="display:inline-block; height:120px; margin-top:200px" src="images/logo.png" alt="Logo">
                    <br><br><br><br>
                  </a>
                </div>
              </li>
              <li><a href="#sec0"><p class="raleway">Menu 1</p></a></li>
              <li><a href="#sec1"><p class="raleway">Menu 2</p></a></li>
              <li><a href="#sec2"><p class="raleway">Menu 3</p></a></li>
              <li><a href="#sec3"><p class="raleway">Menu 4</p></a></li>
              <li><a href="#sec4"><p class="raleway">Menu 5</p></a></li>
            </ul>
          </div>
          <!--/left-->

          <!--right-->
          <div class="col-md-9">
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <br><br><br><br><br>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <br><br><br><br><br>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <br><br><br><br><br>
            <p>text text text</p>
            <p>text text text</p>
            <p>text...

CSS

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

JavaScript

$('#sidebar').affix({
      offset: {
        top: 235
      }
    });