با استفاده از کدهای زیر و کتابخانه jquery منویی را می تونید بسازید که بعد از اسکرول صفحه به پایین نمایش داده بشه
jsbin
jsfiddle

HTML

<div class="div100">
۱۰۰
</div>
<div class="div100">
۲۰۰
</div>
<div class="div100">
۳۰۰
</div>
<div class="div100">
۴۰۰
</div>
<div class="div100">
۵۰۰
</div>
<div class="div100">
۶۰۰
</div>
<div class="div100">
۷۰۰
</div>
<div class="div100">
۸۰۰
</div>
<div class="div100">
۹۰۰
</div>
<div class="div100">
۱۰۰۰
</div>
<div class="div100">
۱۱۰۰
</div>
<div class="div100">
۱۲۰۰
</div>
<div class="div100">
۱۳۰۰
</div>
<div class="div100">
۱۴۰۰
</div>
<div class="div100">
۱۵۰۰
</div>
<div class="div100">
۱۶۰۰
</div>
<div class="div100">
۱۷۰۰
</div>
<div class="div100">
۱۸۰۰
</div>
<div class="div100">
۱۹۰۰
</div>
<div class="div100">
۲۰۰۰
</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>

JavaScript

$('#wpparsitopmenu').hide();
   function showDiv() {
        if ($(window).scrollTop() > 450 && $('#wpparsitopmenu').data('positioned') == 'false') {
            $("#wpparsitopmenu").hide().css({"position": "fixed", "top": "0px"}).fadeIn().data('positioned', 'true');
        } else if ($(window).scrollTop() <= 450 && $('#wpparsitopmenu').data('positioned') == 'true') {
            $("#wpparsitopmenu").fadeOut(function() {
                $(this).css({"position": "fixed", "top": "-50px"}).show();
            }).data('positioned', 'false');
        }
    }
$(window).scroll(showDiv);
$('#wpparsitopmenu').data('positioned', 'false');

وهمچنین یک لینک به کتابخانه جی کوئری مثل
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

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:fixed;
  height:45px;
  line-height:25px;
  color:#FFFFFF;
  position:fixed;
  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-block;
	float:left;
	margin:0;
	padding:0px;
	margin-left:100px;
}
#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;
}

.div100 {
	display:block;
	padding-top:75px;
	line-height:25px;
	width:100px;
	border-bottom:1px #ccc solid;
}


یک پاسخ برای “ساخت منو ثابت”

موبایلتو شارژ کن