导航随内容 滚动定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CPMS  云屋</title>

    <meta name="apple-mobile-web-app-capable" content="yes">   
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection"> 

    <!--
        动态改写<meta>标签
    给<html>元素添加data-dpr属性,并且动态改写data-dpr的值
    给<html>元素添加font-size属性,并且动态改写font-size的值 
    -->

    <link rel="stylesheet" type="text/css" href="css/style.css">


</head>
<body>
   
   <body >
        <div class="nav">
            <div style="75%; margin:0 auto;height: 60px;" id="fgMenu">
                <span class="logo"><img src="images/logo.png" ></span>
                <ul>
                    <li class="bg"><a href="javascript:;" >首页</a></li>
                    <li><a href="javascript:;" class="">产品</a></li>
                    <li><a href="javascript:;" class="">解决方案</a></li>
                    <li><a href="javascript:;" class="">合作伙伴</a></li>
                    <li><a href="javascript:;" class="">加入我们</a></li>
                </ul> 
            </div>                   
        </div>
        <div id="main" >
            <div class="header " id="homeNav">            
                <div class="banner">
                    <img src="images/banner-back.jpg" >
                </div>
                <div id="introduce">
                    <div class="w_1200">
                        <div class="title">
                            <p>BUSINESS INTRODUCTION</p>
                            <p>我们可能无所不能</p>
                        </div>
                        <p class="content">云创科技,以“互联网约·安心未来”为目标的创新公司。致力于智慧、安全住宿,云端智能监控分析,打 造一站式智慧住宿综合管理平台。同时我们也不断探索总结行业标准化流程,希望利用科技的力量打破现有的管 理模式重新规划新的蓝海。
                        </p>
                        <p class="content">
                            团队成立至今,投入大量资源研发服务平台,同时在不断的市场反馈中,不断升级改进。同时为了更好、更 全面、更安全的适应市场需求,在平台研发的过程中,配套的硬件设备也在生产制造。并全面投放覆盖市场。我 们相信技术的革新将会不断优化传统的行业标准流程。智能时代正在到来……
                        </p>
                    </div>                  
                </div>                
            </div>
           
            <div class="product " id="productNav" >
                <img src="images/product.png" alt="" class="backImg" />              
                <div class="w_1200">
                    <div class="content productContent">
                        <p class="top"><span><img src="images/logo2.png" alt=""></span><span>安心宿 智能住行</span></p>
                        <p class="center">用户移动端人脸识别认证成功后,上传公安系统 自动获取开门,权限入住流程简单便捷。</p>
                        <ul class="bottom">
                            <li>
                                <span><img src="images/product-01.png" alt=""></span>
                                <p>便捷高效</p>
                                <p> 一键开门无需前台登记开门,手机一键操作开门在指尖</p>
                            </li>
                            <li>
                                <span><img src="images/product-02.png" alt=""></span>
                                <p>便捷高效</p>
                                    <p> 一键开门无需前台登记开门,手机一键操作开门在指尖</p>
                            </li>
                            <li>
                                <span><img src="images/product-03.png" alt=""></span>
                                <p>便捷高效</p>
                                <p> 一键开门无需前台登记开门,手机一键操作开门在指尖</p>
                            </li>
                        </ul>
                    </div>
                </div>       
            </div>
            <div class="scheme " id="shemeNav" >                            
                <div style="1200px; margin:0 auto">
                    <div style="display: flex;
    align-items: center;
    justify-content: center;">
                        <span style="flex: 1;"><img src="images/scheme.png" alt="" class="backImg" /> </span>
                        <div class="content">
                            <p class="top">安心宿智能管理系统</p>
                            <p class="center">高效的智能经营管理系统,统筹人员信息 随时随地接受订单,操作简单方便。</p>
                            <ul class="bottom">
                                <li>
                                    <span><img src="images/scheme-01.png" alt=""></span>
                                    <p>用户移动端人脸识别</p>
                                    <p>USER MOBILE FACE RECOGNITION</p>
                                </li>
                                <li>
                                    <span><img src="images/scheme-02.png" alt=""></span>
                                    <p>认证成功后上传公安系统</p>
                                        <p> UPLOAD THE PUBLIC SECURITY SYSTEM AFTER THE AUTHENTICATION IS SUCCESSFU</p>
                                </li>
                                <li>
                                    <span><img src="images/scheme-03.png" alt=""></span>
                                    <p>自动获取开门权限</p>
                                    <p> AUTOMATIC ACCESS TO OPEN THE DOOR</p>
                                </li>
                                <li>
                                        <span><img src="images/scheme-04.png" alt=""></span>
                                        <p>入住流程简单便捷</p>
                                        <p>CHECK-IN PROCESS IS SIMPLE AND CONVENIENT</p>
                                    </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="doorLock " id="partnerNav" > 
                <img src="images/door-back.jpg" alt="" class="backImg" />  
                <div class="w_1200">        
                    <div class="content">
                        <p class="top">智能终端门锁</p>
                        <p class="center">贴心的智能管家系统,全面安全守护 , 高效的人像抓拍技术,让入住更安全。</p>
                        <ul class="bottom">
                            <li>
                                <span><img src="images/doorLock-01.png" alt=""></span>
                                <p>身份证开门/人脸识别开门</p>
                                <p>ID OPENS/FACE RECOGNITION OPENS</p>
                            </li>
                            <li>
                                <span><img src="images/doorLock-02.png" alt=""></span>
                                <p>门锁摄像头人脸对比</p>
                                <p> DOOR LOCK CAMERA FACE COMPARISON</p>
                            </li>
                            <li>
                                <span><img src="images/doorLock-03.png" alt=""></span>
                                <p>门锁摄像头智能抓拍</p>
                                <p>DOOR LOCK CAMERA SMART SNAP</p>
                            </li>
                            <li>
                                <span><img src="images/doorLock-04.png" alt=""></span>
                                <p>实人实住 防止一人多住</p>
                                <p>PREVENT ONE PERSON FROM LIVING MORE THAN ONE</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flow " id="joinUs">
                <div class="w_1200">  
                    <p>软硬融合<span></span> 多重认证 <span></span>云端监管</p>
                    <p>
                            打造网约房安全监管最强护盾。实现了房源备案+“实名认证”+“实人入住”+“实时上传”+“在线监管” 的全方位治安监管需求,提高了流动人口管控和网约房治安管理效果。相较于传统监管 办法而言,新的管理模式可以实现自动采集住宿人信息并传输至公 安部门。是入住人员信息从被动录入转变成主动录入, 促进科技强警,有效解放警力。
                    </p>
                    <div class="flowImg">
                        <img src="images/flow.png" alt="">
                    </div>
                    <ul class="productBox">
                        <li><img src="images/company-01.png" ></li>
                        <li><img src="images/company-02.png" ></li>
                        <li><img src="images/company-03.png" ></li>
                        <li><img src="images/company-04.png" ></li>               
                    </ul>
                
                </div>
            </div> 
            
            <div class="footer">
                <div class="w_1200" style="height: 290px;">
                    <p class="top">Contact us</p>
                    <p>合作热线:400-019-0611</p>
                    <p><span>公司地址:合肥市滨湖区万达银座B栋47层</span><span style="font-size: 18px; margin-left: 100px;">Copyright © 2017-2018 alilys.com 云创科技 版权所有 Power by DedeCms</span></p>
                </div>
            </div>   
        
        </div>
   
</body>

</body>
 
     <script src="js/jquery-3.3.1.min.js"></script>
     <script src="js/flexible_css.js"></script>
    <script src="js/flexible.js"></script>
    <script type="text/javascript">

$(function(){
    var backHeight=$(".product  .backImg").height();
    $(".product ").height(backHeight);
    $(".product  .w_1200").height(backHeight);
    var conHeight= $(".product .content").height();
    $(".product .content").css("padding-top",(backHeight-conHeight)/2);

     var backHeight02=$(".scheme .backImg").height();
    $(".scheme ").height(backHeight02);
    $(".scheme .w_1200").height(backHeight02);
    var conHeight02= $(".scheme .content").height();
    $(".scheme .content").css("padding-top",(backHeight02-conHeight02)/2);

      var backHeight03=$(".doorLock  .backImg").height();
    $(".doorLock  ").height(backHeight03);
    $(".doorLock  .w_1200").height(backHeight03);
      var conHeight03= $(".doorLock .content").height();
    $(".doorLock .content").css("padding-top",(backHeight03-conHeight03)/2);

})



window.scrollTo({top:0 })

    var nowpage=0;//显示第几块内容
    var juli =0;
   var div_tops = new Array();
   var a=true;
    $(function(){
        var main_div = $('#main >div').length-1;
        for(var i=0;i<main_div;i++){
           div_tops[i] =  $('#main >div').eq(i).offset().top;
        }
        //点击导航
        $('.nav ul li').click(function(event) {

a=false;
            nowpage=$(this).index();           
            if(nowpage<=4){donghua();}
  setTimeout(function  () {
        // body...
        a=true;
      },1000);

        });

        //页面滚动监听 改变导航
        $(window).scroll(function() {
if(a){

          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
           div_tops.forEach(function (element, index) {
           if(scrollTop>=element){
              nowpage = index;
           }
         
           });
            if(nowpage>4){nowpage=4}
            $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg');

}
        })

    })
    //动画
  function donghua(){
        //获取元素距离顶部的距离
        var top = $('#main >div').eq(nowpage).offset().top;
        window.scrollTo({
          top:top,
          behavior:'smooth'
        })

    $('.nav ul li').eq(nowpage).addClass('bg').siblings().removeClass('bg');
    
  }

</script>

</html>
原文地址:https://www.cnblogs.com/jinsuo/p/12105764.html