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

标签：fun   att   ons   src   top   code   添加   win   event   

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;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: #fff;
  box-shadow: 0 2px 5px 1px rgb(0 0 0 / 10%);
}

UI效果：

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

标签：fun   att   ons   src   top   code   添加   win   event   

原文地址：https://www.cnblogs.com/onceweb/p/14812722.html