滚动条右侧定导航

最新推荐文章于 2022-07-05 10:51:39 发布

凉川望远

最新推荐文章于 2022-07-05 10:51:39 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_24193261/article/details/52211554

本文介绍了一个基于HTML、CSS和JavaScript实现的侧边导航栏设计案例，该导航栏包含固定位置布局、动态显示隐藏功能及平滑滚动效果等交互细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css代码

/*rightNav*/

.rightNav{position: fixed;right:0;top:200px;width:120px;}
.rightNav a{color: #fff;font-size: 16px;line-height: 36px;display: block;width: 100%;height:40px;line-height: 40px;}
.rightNav ul>li>a{width:90px;padding-left: 30px;text-align: center;}
.rightNav .specialNav{height:180px;display: none;}
.rightNav .specialNav>li>a{width:120px;text-align: center;padding: 0;font-size: 14px;background: #fff;color: #343434}
.rightNav .specialNav>li{background:#343434;margin: 5px 0;}
.rightNav .Trends{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1001px;}
.rightNav .special{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1035px;}
.rightNav .discuss{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1066px;}
.rightNav .back{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat -101px -1099px;}
.rightNav .Trends:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1001px;}
.rightNav .special:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1035px;}
.rightNav .discuss:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1066px;}
.rightNav .back:hover{background:#343434 url('http://n.sinaimg.cn/a15ac274/20150921/icon.png') no-repeat 10px -1099px;}
.rightNav .specialNav>li>a:hover{background: #c33429;color: #fff}
.rightNav a:hover{color: #9a9a9a}

Js代码
   <script src="http://n.sinaimg.cn/a15ac274/20151029/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    //侧导航
    (function(){
        jQuery('.special').click(function(){
            jQuery('.specialNav').slideToggle();
        });
    })();

    //右导航点击
    (function(){
        jQuery('.back').click(function(){
            jQuery('html,body').stop().animate({scrollTop :0},1000);
        });

         jQuery('.liLead').click(function(){
             jQuery('html,body').stop().animate({scrollTop :400+'px'},1000);
        });
         jQuery('.liMoment').click(function(){
            jQuery('html,body').stop().animate({scrollTop :1270+'px'},1000);
        });
         jQuery('.liUnique').click(function(){
            jQuery('html,body').stop().animate({scrollTop :1830+'px'},1000);
        });
         jQuery('.liVideo').click(function(){
             jQuery('html,body').stop().animate({scrollTop :2650+'px'},1000);
        });
         jQuery('.discuss').click(function(){
            jQuery('html,body').stop().animate({scrollTop :3700+'px'},1000);
        });
    })();

    };

</script>

html代码

    <div class="rightNav">
        <ul class="">
            <li class="mb10"><a href="http://roll.news.sina.com.cn/s_xjpfy2015_all/index.shtml" class="icon Trends" target="_blank">最新动态</a></li>
            <li class="mb5">
                <a href="javascript:;" class="icon special">专题导航</a>
                <ul class="specialNav">
                    <li><a href="javascript:;" class=" icon liLead">头条</a></li>

                    <li><a href="javascript:;" class="icon liMoment">精彩瞬间</a></li>
                    <li><a href="javascript:;" class="icon liUnique">深度解码</a></li>
                    <li><a href="javascript:;" class="icon liVideo">精彩视频</a></li>
                </ul>
            </li>
            <li class="mb10"><a href="javascript:;" class="icon discuss">评论</a></li>
            <li><a href="javascript:;" class="icon back">TOP</a></li>
        </ul>
    </div>