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

posted @ 2021-05-26 11:29  onceweb  阅读(399)  评论(0)    收藏  举报