JSFiddle - React, Tailwind, and code Playground

by Iman Fakhar

HTML

<div class="header">
<div class="div100">
100
</div>
<div class="div100">
200
</div>
<div class="div100">
300
</div>
 </div>   
<div id="wpparsitopmenu">
<ul class="wpptmnav">
<li><a href="#" rel="home" >خانه</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
<form method="get" action="http://css3.xzn.ir/"><input name="s" type="text" /><input name="submit" type="submit"/></form>
</div>
<div class="div50">
400
</div>
<div class="div100">
500
</div>
<div class="div100">
600
</div>
<div class="div100">
700
</div>
<div class="div100">
800
</div>
<div class="div100">
900
</div>
<div class="div100">
1000
</div>
<div class="div100">
1100
</div>
<div class="div100">
1200
</div>
<div class="div100">
1300
</div>
<div class="div100">
1400
</div>
<div class="div100">
1500
</div>
<div class="div100">
1600
</div>
<div class="div100">
1700
</div>
<div class="div100">
1800
</div>
<div class="div100">
1900
</div>
<div class="div100">
2000
</div>

CSS

body {
	height:1500px;
	margin:0;
}
#wpparsitopmenu {
  width:100%;
  background-color: #000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333));
  background-image: -webkit-linear-gradient(top, #000, #333);
  background-image:    -moz-linear-gradient(top, #000, #333);
  background-image:      -o-linear-gradient(top, #000, #333);
  background-image:         linear-gradient(to bottom, #000, #333);
  position:relative;
  height:45px;
  line-height:25px;
  color:#FFFFFF;
  clear:both;
  
}
#wpparsitopmenu .wpptmnav {
	display:inline-block;list-style:none;float:right;margin-right:100px;
}
#wpparsitopmenu .wpptmnav li {
	display:inline-block;padding-right:10px;
}
#wpparsitopmenu .wpptmnav li a,
#wpparsitopmenu .wpptmnav li a:link,
#wpparsitopmenu .wpptmnav li a:visited
 {
	text-decoration:none;color:#ccc;
	display:block;
	padding-left:3px;
	padding-right:3px; 
}
#wpparsitopmenu .wpptmnav li a:hover,
#wpparsitopmenu .wpptmnav li a:active
 {
	text-decoration:none;color:#FFF;
	background:#000000;
}
#wpparsitopmenu form {
	display:inline;
	float:left;
	margin:0;
	padding:0px;

}
#wpparsitopmenu form input[type=text] {
	width:200px;
	background:#333;
	color:#fff;
	border-color:#777;
	border-bottom-color:#aaa;
	outline-color:#ccc;
	border-width:1px;
}

#wpparsitopmenu form input[type=submit] {
	padding:5px 10px;
	border-style:none;
	outline-style:none;
  background-color:#333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#000));
  background-image: -webkit-linear-gradient(top, #333, #000);
  background-image:    -moz-linear-gradient(top, #333, #000);
  background-image:      -o-linear-gradient(top, #333, #000);
  background-image:         linear-gradient(to bottom, #333, #000);
  border-right:1px #333 solid;
  color:#fff;

}

#wpparsitopmenu form input {
margin:0;
height:40px;
}
.header {
    background:red;
    color:yellow;
}
.div100...

JavaScript

$(window).scroll(function() {
        if ($(window).scrollTop() >= 300) {
            $("#wpparsitopmenu").css({"position": "fixed", "top" : "0px" });
        } else {
            $("#wpparsitopmenu").css({"position": "relative", "top" : "auto" });
        }
    })