Scroll_Header_&affix

nav is fixed after certain time.

by vaheed akhtar

HTML

<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">

<div class="container">
<div class="col-xs-12">

  <nav class="col-xs-3">
    <div data-spy="affix">
     <h2>Tab1</h2>
     <h2>Tab1</h2>
     <h2>Tab1</h2>
    </div>
  </nav>
  
  <div class="col-xs-6">
  
   <div id="one" class="text-center">

<!--     search box for whole website -->  
   <form>
    <div class="input-group">
      <input type="text" class="form-control" 
      placeholder="Search for news, articles, peoples and more"/>
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit">
         <i class="glyphicon glyphicon-search"></i>
        </button>
      </div>
    </div>
  </form>
  
<!--   blog post form --> 
  
  <div id="websitesearch">
  
   <ul class="nav nav-tabs">
    <li class="active">
     <a data-toggle="tab" href="#status"><i class="glyphicon glyphicon-heart"></i> Status</a>
    </li>
    <li>
    <a data-toggle="tab" href="#blogpost"><i class="glyphicon glyphicon-comment"></i> Post Blog</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="status" class="tab-pane fade in active">
      <h3>Status</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation 
      ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="blogpost" class="tab-pane fade">
      <h3>Post Blog</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit 
      voluptatem accusantium doloremque laudantium, 
      totam rem aperiam.</p>
    </div>
  </div>
  </div>
  
  
   
   <h1>One</h1>
   </div>
   
   
   <div id="two" class="text-center">
   <h1>Two</h1>
   <p> or environmental modifications or arrangement in order to solve a problem, improve a preexisting solution to a problem, achieve a goal or perform a specific function. It can also refer to the collection of such tools,</p> 
...

CSS

#three{height:500px;background:lightgreen;color:white;font-size:25px;}
#two, #four{height:500px;background:blue;color:white;}

#websitesearch{
  margin-top:20px;
  border-top: 2px solid lightgreen;
}

JavaScript

/* $(document).ready({
  $(.)
}) */