zoukankan      html  css  js  c++  java
  • 仿电梯导航案例

    JQ:
    
    $(function(){
            $(window).scroll(function(){
                //获取家用电器div距离顶部的高度
                var navs=$(".con").children(".d1").offset().top;
                //判断页面滚动的高度是否不小于,家用电器距离顶部的高度
                if($(document).scrollTop()>=navs){ 
                    $("ul li").fadeIn();
                }else{
                    $("ul li").fadeOut();
                }
    
                //获取页面滚动出去的高度
                var doctop=$(document).scrollTop();
                // 循环获取div的元素
                $(".con div").each(function(i,ele){
                    //循环获取每个div距离顶部的高度
                    //$(this).offset().top;
                    //  判断滚动出去的页面是否大于等于当前div距离顶部的距离
                    if(doctop>=$(this).offset().top){
                        // 找到div对应的li加上current样式
                        $("ul li").eq(i).addClass("current").siblings().removeClass();
                    }
                })
            })
            $("ul li").click(function(){
                var idx=$(this).index();
                //获取div框距离顶部的高度
                var tops=$(".con").children("div").eq(idx).offset().top;
                // alert(tops);
                $("html").stop().animate({
                    scrollTop:tops
                });
                $(this).addClass("current").siblings().removeClass("current");
            })
        })
    
    
    HTML:
    
    <ul>
            <li class="current">家用电器1</li>
            <li>手机通讯2</li>
            <li>电脑办公3</li>
            <li>精品家具4</li>
        </ul>
        <div class="nav">菜单栏</div>
        <div class="con">
            <div class="d1">家用电器1</div>
            <div class="d2">手机通讯2</div>
            <div class="d3">电脑办公3</div>
            <div class="d4">精品家具4</div>
            <div style="height: 600px"></div>
        </div>
    

      

  • 相关阅读:
    Module:template
    Grunt:GruntFile.js
    Grunt:常见错误
    架构:架构-1
    架构:目录
    DS:template
    Jasper:用户指南 / 设备 / 生命周期管理 / SIM 卡状态
    Jasper-Api:接口测试
    linux服务之git
    Java实现 洛谷 P1487 陶陶摘苹果(升级版)
  • 原文地址:https://www.cnblogs.com/qtbb/p/11345897.html
Copyright © 2011-2022 走看看