دانیال دزفولی
دوشنبه 06 مرداد 1393, 12:11 عصر
بله میشه. کاملترین حالتش بصورت زیر میشه.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body, html{
height: 100%;
}
.section{
min-height: 100%;
}
.section>div{
padding: 10px;
padding-top: 40px;
}
#home{
background: #A2DED0;
}
#contact{
background: #F89406;
}
#about{
background: #6BB9F0;
}
ul{
background: #333;
position: fixed;
height: 30px;
width: 100%;
}
ul li{
display: inline-block;
}
ul li a{
color: #fff;
line-height: 30px;
padding: 0 10px;
}
ul li.active a{
background: #993300;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
$(window).scroll(function() {
$('.section').each(function() {
if ($(window).scrollTop() >= $(this).offset().top - ($(window).outerHeight() / 2)) {
var id = $(this).attr('id');
$('.menu li').removeClass('active');
$('.menu li a[href=#' + id + ']').parent().addClass('active');
}
});
});
$(window).resize(function() {
$('.menu li').each(function() {
if ($(this).hasClass('active')) {
var id = $(this).children().attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top
}, 50);
return;
}
});
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="active"><a href="#home">home</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#about">about</a></li>
</ul>
<div id="home" class="section">
<div>
Home Page
</div>
</div>
<div id="contact" class="section">
<div>
Contact page
</div>
</div>
<div id="about" class="section">
<div>
About page
</div>
</div>
</body>
</html>
من برای دکمه ی اکتیو با before کلاس تعریف کردم ولی هنگام اسکرول لرزش داره یعنی همش کلاسه میره و میاد