楼层导航源码分享

巴扎黑

发布时间：2017-06-26 14:31:46

1215人浏览过

来源于php中文网

原创

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>楼层导航-smallswallows</title>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js?1.1.11"></script>
   <style type="text/css">
   *{
       margin:0;
       padding:0;
   }
       .div div{
           width: 300px;
           height: 800px;
           border: 1px solid red;
       }
       ul li{
           list-style-type: none;
       }
       .floor{
           position: fixed;
           top: 20px;
           right: 20px;
           border: 1px solid red;
           display: none;
       }
       .loading{
           background: skyblue;
       }
       .red{
           background: red;
       }
       li,.top{
           cursor: pointer;
}
       li:hover{
           background: skyblue;
       }
   </style>
</head>
<body>
   <div style="height: 50px;background: red">楼层展示</div>
   <div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
   </div>
   <div> 
       <ul>
           <li>第1张</li>
           <li>第2张</li>
           <li>第3张</li>
           <li>第4张</li>
           <li>第5张</li>
           <li>第6张</li>
           <li>第7张</li>
           <li>第8张</li>
       </ul>
       <p>返回顶部</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/js/8055" title="简单好看的导航栏特效代码"><img
                                                                                src="https://img.php.cn/upload/jscode/000/000/009/170918490384978.jpg" alt="简单好看的导航栏特效代码"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/js/8055" title="简单好看的导航栏特效代码">简单好看的导航栏特效代码</a>
                                                                        <p>分享一款好看的粘性导航栏特效代码，该跳跃导航栏特效代码，每次点击时为要跟随的目标创建了一个自定义运动路径，可以轻松地为您的设计、动画或SVG粘性导航输入硬编码值。</p>
                                                                </div>
                                                                <a href="/xiazai/js/8055" title="简单好看的导航栏特效代码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
   </div>
</body>
<script>
   window.onload = window.onscroll = function(){
       var top = 50; //控制离顶部的距离
       var length = $(".div div").length;
       var liLength=$("li").length;
//添加加载动画 each
       $(".div div").each(function(){
          $(this).addClass("loading");
       })
console.log($(".div div")[0].offsetTop)
       if($(window).scrollTop() >$(".div div")[0].offsetTop-top ){
           $(".floor").css("display","block")
       }else{
           $(".floor").css("display","none")
}
// 楼层添加颜色，通过:eq()方法来实现
       var num = 0;
       for(var i = 0;i<length;i++){
          if($(window).scrollTop() >=$(".div div")[i].offsetTop- top){
               num = i;
           }
           $(".floor li:eq("+i+")").css("background","")
       }
           $(".floor li:eq("+num+")").css("background","red")
// 楼层点击事件 点击楼层跳转
       for(var i = 0;i<liLength;i++){
           $(".floor li:eq("+i+")").click(function(){
               for(var j=0;j<liLength;j++){
                   if($(this).html() == $(".floor li:eq("+j+")").html()){
                        $('body,html').stop().animate({
                            scrollTop: ($(".div div")[j].offsetTop)
                        }, 500);
                        return false;
                   }
               }
           })
       }
   }
    $(".top").click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
</script>
</html>

AmCharts 5 地图精准定位缩放实战指南

如何用 JavaScript 实现按钮组的背景色切换（点击高亮/再点击恢复）

如何在 React 中基于字数限制动态截断并展开段落内容

TypeScript React 中正确实现滚动事件防抖的闭包方案

如何修复登录路由返回 400 Bad Request 的问题

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jQuery UI的简介和特性介绍下一篇：前端基于JQgrid实现自定义列头展示

作者最新文章

HTML中用正则表达式实现表格验证

2018-05-29 15:14

Swiper轮播图源码分享解析

2018-05-28 17:04