• $(window).scrollTop()与$(dom).offset().top


    js代码如下:

    //点击导航
    $("#col-md-12_1621671164153 a").click(function(event){
        event.preventDefault();
        $(this).addClass("activeCur").siblings().removeClass("activeCur")
        $("html,body").animate({ 
            scrollTop:$($.attr(this, "href")).offset().top-58
         }, 100);
    })
    //滚动操作
    $(window).scroll(function(){
        var cptd = parseInt($("#col-md-12_1621671164196").offset().top-143)
        var cpgn = parseInt($("#col-md-12_1621671164244").offset().top-143)
        var fzlc = parseInt($("#col-md-12_1621671164303").offset().top-143)
        var fwyaq = parseInt($("#col-md-12_1621671164351").offset().top-143)
        var khal = parseInt($("#col-md-12_1621671164411").offset().top-143)
        var scroH = $(this).scrollTop();
        if(scroH+62 > $("#col-md-12_1621671164151").offset().top){
            $("#app #col-md-12_1621671164153").addClass("thisScrollTop")
        }else{
            $("#app #col-md-12_1621671164153").removeClass("thisScrollTop")
        }
        if(scroH>=khal-500){
            set_cur(".a_1621671164188")
            console.log("客户案例")
        }else if(scroH>=fwyaq){
            set_cur(".a_1621671164181")
            console.log("服务与安全")
        }else if(scroH>=fzlc){
            set_cur(".a_1621671164175")
            console.log("发展历程")
        }else if(scroH>=cpgn){
            set_cur(".a_1621671164167")
            console.log("产品功能")
        }else if(scroH>=cptd){
            set_cur(".a_1621671164161")
            console.log("产品特点")
        }
    })
    function set_cur(n){
        if($("#col-md-12_1621671164153 a").hasClass("activeCur")){
            $("#col-md-12_1621671164153 a").removeClass("activeCur");
        }
        $("#col-md-12_1621671164153 a"+n).addClass("activeCur");
    }
    

    //css代码如下这个类名要添加到嵌套第二个标签(div),否则滚动到下边的dom因为受到当前导航的fixed定位而相差当前导航高度;
    .thisScrollTop{position: fixed;
       100%;
      top: 0;
      left: 0;
      z-index: 10000;
      background: #fff;
      box-shadow: 0 2px 5px 1px rgb(0 0 0 / 10%);
    }
    

    UI效果:

  • 相关阅读:
    Android Studio使用百度地图(二)
    Android Studio使用百度地图(一)
    寒假每日日报30(体温登记app——进度3)
    EF CodeFirst数据注解特性详解
    EF CodeFirst配置领域类
    EF CodeFirst简介、默认约定、数据库初始化策略
    EF CodeFirst关于Mysql如何自动生成数据库表
    EF的预先加载--Eager Loading
    EF的延迟加载LazyLoad
    ADO.NET中sqlserver和mysql的变量名
  • 原文地址:https://www.cnblogs.com/onceblog/p/14812560.html
Copyright © 2020-2023  润新知