超酷的固定菜单页面滚动效果

By柏小白

超酷的固定菜单页面滚动效果

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示:超酷的页面滚动效果</title>
<style type="text/css">
.nav{width:50px; /*position:fixed; right:5px;*/ position:fixed; margin-left:920px; top:30%; z-index:1999; background:#f0f0f0; border: 1px solid #ccc;
  -webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
.nav li{height:50px; line-height:50px; border-bottom:1px solid #d3d3d3; background:url(data:image/png;base64,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) no-repeat; text-align:center; cursor:pointer}
.nav li:hover{background-color:#f9f9f9; text-decoration:none}
.nav li:last-child{border-bottom:none}
.nav li.cur{background-color:#ffc}
.nav li.pro{background-position:0 0}
.nav li.news{background-position:0 -55px}
.nav li.ser{background-position:0 -105px}
.nav li.con{background-position:0 -155px}
.nav li.job{background-position:0 -207px}
.box{height:500px; margin: 0 10px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
.box p{line-height:30px; margin:20px; text-align:center; font-size:28px}
.box p span{margin:10px}

</style>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<!-- <script type="text/javascript" src="jquery.easing.min.js"></script> -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript">
$(function(){
    navpos();
    
    var pro_top = $("#pro").offset().top;
    var news_top = $("#news").offset().top;
    var ser_top = $("#ser").offset().top;
    var con_top = $("#con").offset().top;
    var job_top = $("#job").offset().top;
    //alert(tops);
    $(window).scroll(function(){
        var scroH = $(this).scrollTop();
        if(scroH>=job_top){
            set_cur(".job");
        }else if(scroH>=con_top){
            set_cur(".con");
        }else if(scroH>=ser_top){
            set_cur(".ser");
        }else if(scroH>=news_top){
            set_cur(".news");
        }else if(scroH>=pro_top){
            set_cur(".pro");
        }
    });
    
    $(".nav li").click(function() {
        var el = $(this).attr('class');
        $('html, body').animate({
            scrollTop: $("#"+el).offset().top
            },{
            easing: 'easeOutSine',
            duration: 300,
            complete:function(){
            }
        });
    });
});
$(window).resize(function(){
  navpos();
});
function navpos(){
    var page_w = $(document).width();
    var offset = $("#main").offset().left;
    var main_w = $("#main").outerWidth();
    var right = page_w-offset-main_w-50;
    //alert(right);
    if(right>10){
        $(".nav").css('right',right-10);
    }else{
        $(".nav").css('right',10);
    }
}
function set_cur(n){
    if($(".nav li").hasClass("cur")){
        $(".nav li").removeClass("cur");
    }
    $(".nav li"+n).addClass("cur");
}
</script>
</head>
 
<body>
 
<div id="main">
  <ul class="nav">
    <li class="pro"></li>
    <li class="news"></li>
    <li class="ser"></li>
    <li class="con"></li>
    <li class="job"></li>
</ul>
     <div id="pro" class="box">
        <h3>产品展示</h3>
        
        <br/>
       
     </div>
     <div id="news" class="box">
        <h3>新闻中心</h3>
     </div>
     <div id="ser" class="box">
        <h3>服务支持</h3>
       
     </div>
     <div id="con" class="box">
        <h3>联系我们</h3>
     </div>
     <div id="job" class="box" style="height:680px">
        <h3>人才招聘</h3>
     </div>
</div>
</body>
</html>

 





演示:超酷的页面滚动效果




产品展示

新闻中心

服务支持

联系我们

人才招聘


About the author

柏小白 administrator