JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="domain_header">
        <div class="wrapper">
            <div class="domain_name"> <a href="../final/index.php">Domain Name</a>

            </div>
             <div style="margin-left:350px"> <input type="text" name="city" list="cityname" placeholder="search"><datalist id="cityname">
                 <optgroup label='Nokia' >
  <option value="Boston">
  <option value="Cambridge"> <option value="Boston">
  <option value="Cambridge">
      <optgroup/><option value="Boston">
  <option value="Cambridge"> <option value="Boston">
  <option value="Cambridge"> <option value="Boston">
  <option value="Cambridge"> <option value="Boston">
  <option value="Cambridge"> <option value="Boston">
  <option value="Cambridge">
      <datalist/><inout/>

            </div>

            </div>
        </div>
    </div>
    <div id="header">
        <div class="wrapper">
            <div id="nav">
                <ul>
                    <li class="hiden"> <a href="#">Logo</a>

                    </li>
                    <li class="hiden"> <a href="#">Search</a>

                    </li>
                    <li> <a href="../final/index.php">Home</a>

                    </li>
                    <li> <a href="../final/index.php">Home</a>

                    </li>
                    <li> <a href="../final/index.php">Home</a>

                    </li>
                    <li> <a href="../final/index.php">Home</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="content">Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the liquid layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer CenterBe aware that the CSS for these layouts is heavily commented. If...

CSS

html, body {
    margin: 0;
    padding: 0;
    position:relative;
}
#container {
    width:100%;
    background:#ffffff;
}
.wrapper {
    background:#ffffff;
    width:1000px;
    margin:auto;
}
.domain_header {
    height:70px;
    line-height:70px;
    background:#FFFFFF;
    width:100%;
}
.domain_name {
    font-family:Verdana, Geneva, sans-serif;
    float:left;
    clear:left;
}
#header {
    width:100%;
    border-bottom: solid 1px #D1D0CE;
    position:relative;
    background:#000000;
}
.wrapper #nav {
    width:100%;
    text-align:center;
    overflow:hidden;
    line-height:30px;
    vertical-align:middle;
    background:#000000;
}
.wrapper #nav ul {
    margin-right:15px;
}
.wrapper #nav li {
    float:left;
    display:inline-block;
}
.wrapper #nav li a {
    clear:left;
    font-size:large;
    color:#ffffff;
    padding: 0px 13px 0px 13px;
    text-decoration: none;
}
.wrapper #content {
    margin-top:120px;
    width: 1000px;
}
.wrapper #nav li.hiden {
    display:none;
}

JavaScript

function changePos() {
    var header = $('#header'),
        sT = $(window).scrollTop();
    if (sT > 70) {
        header.css({'position':'fixed','top':'0'});
        $('.hiden').fadeIn();
    } else {
        header.css({'position':'relative','top':' '});
        $('.hiden').fadeOut();
   }
}
$(document).scroll(function () {
    changePos();
})