jquery 侧边导航

最新推荐文章于 2022-12-17 12:54:04 发布

aili1947

最新推荐文章于 2022-12-17 12:54:04 发布

阅读量123

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wzzl/p/4947780.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        html{width: 100%;height: 100%}
        body{width: 100%;height: 100%}
        .one0{background:burlywood}
        .one1{background: #D40000}
        .one2{background:yellow}
        .one3{background:blueviolet}
        .one4{background:chocolate}
        .one5{background:violet}
        .one6{background:goldenrod}
        .one{width:100%;height: 100%}
        .floatCtro{ width:100px; height:350px; position: fixed; right:50%; margin-right:-700px; top:131px; z-index:100}
        .floatCtro p{width:100px; text-align:center; height:40px; line-height:40px; font-family:'寰蒋闆呴粦'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;}
        .floatCtro a{ display:inline-block; width:100px; height:60px; margin:10px 0 0 0; background:#fff; color:#000;  vertical-align:middle; cursor:pointer;}
        .floatCtro a span{ display:block; width:100px; height:44px;  font-family:'寰蒋闆呴粦'; font-size:14px; line-height:40px; text-align:center; margin:8px 0px;}
        .floatCtro a:hover{ background:#c40000; color:#fff; zoom:1;}
        .floatCtro p:hover{ background:#c40000; color:#fff;}
        .floatCtro p.cur{ background:#c40000;color:#fff;}
        .tcbox{display:block}
    </style>
</head>
<body>
<div class="one one0" id="float00"></div>
<div class="one one1" id="float01"></div>
<div class="one one2" id="float02"></div>
<div class="one one3" id="float03"></div>
<div class="one one4" id="float04"></div>
<div class="one one5" id="float05"></div>
<div class="one one6" id="float06"></div>
<script>
    alert($);
    $(function(){
        var AllHet = $(window).height();

        var mainHet= $('.floatCtro').height();
        var fixedTop = (AllHet - mainHet)/2
        //  $('div.floatCtro').css({top:fixedTop+'px'});


        $('div.floatCtro p').click(function(){
            var ind = $('div.floatCtro p').index(this)+1;
            var topVal = $('#float0'+ind).offset().top;
            $('body,html').animate({scrollTop:topVal},500)
        })
        $('div.floatCtro a').click(function(){
            $('body,html').animate({scrollTop:0},500)
        })
        $(window).scroll(scrolls)
        scrolls()
        function scrolls(){
            var f1,f2,f3,f4,f5,f6,f7,bck;
            var fixRight = $('div.floatCtro p');
            var blackTop = $('div.floatCtro a')
            var sTop = $(window).scrollTop();
            fl = $('#float01').offset().top;
            f2 = $('#float02').offset().top;
            f3 = $('#float03').offset().top;
            f4 = $('#float04').offset().top;
            f5 = $('#float05').offset().top;
            f6 = $('#float06').offset().top;

            if(sTop<=f2-100){
                blackTop.fadeOut(300).css('display','none')
            }
            else{
                blackTop.fadeIn(300).css('display','block')
            }

            if(sTop>=fl){
                fixRight.eq(0).addClass('cur').siblings().removeClass('cur');
            }
            if(sTop>=f2-100){
                fixRight.eq(1).addClass('cur').siblings().removeClass('cur');
            }
            if(sTop>=f3-100){
                fixRight.eq(2).addClass('cur').siblings().removeClass('cur');
            }
            if(sTop>=f4-100){
                fixRight.eq(3).addClass('cur').siblings().removeClass('cur');
            }
            if(sTop>=f5-100){
                fixRight.eq(4).addClass('cur').siblings().removeClass('cur');
            }
            if(sTop>=f6-100){
                fixRight.eq(5).addClass('cur').siblings().removeClass('cur');
            }
        }
    })
</script>


<div class="floatCtro">
    <p class="cur">热门名牌</p>
    <p>热门推荐</p>
    <p>婚纱摄影</p>
    <p>婚礼策划</p>
    <p>婚礼司仪</p>
    <p>幸福一生</p>
    <a>
        <font style="width:60px; height:1px; display:block"></font>
        <span>返回顶部</span>
    </a>
</div>

</body>
</html>