• $(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效果:

  • 相关阅读:
    SDN第4次上机作业
    SDN第三次作业
    SDN第三次上机作业
    SDN第二次上机作业
    SND第二次作业
    【Beta Scrum】冲刺!4/5
    【Beta Scrum】冲刺! 3/5
    【Beta Scrum】冲刺! 2/5
    【Beta Scrum】冲刺! 1/5
    SDN第二次上机作业
  • 原文地址:https://www.cnblogs.com/onceweb/p/14812722.html
Copyright © 2020-2023  润新知