使用jquery实现楼梯效果,代码如下:
$(function() {
let flag = true;
$(window).scroll(function() {
if (flag) {
let st = $(this).scrollTop();
if (st > 500) {
$("#floorNav").fadeIn();
} else {
$("#floorNav").fadeOut();
}
$(".titi").each(function(i, v) {
if (st >= $(this).offset().top - $(this).outerHeight() / 2) {
$("#floorNav li").eq(i).addClass(“hover”).siblings().removeClass(“hover”);
console.log()
}
})
}
})
$(’#floorNav li:not(:last)’).click(function() {
flag = false;
let index = $(this).index();
( w i n
楼梯效果
最新推荐文章于 2023-09-04 00:06:36 发布
这篇博客介绍了如何利用jQuery创建一种楼梯滚动效果。当页面滚动超过500像素时,#floorNav元素淡入显示,根据滚动位置高亮对应的楼层导航。点击楼层导航项,页面平滑滚动到相应位置,实现良好的用户体验。
摘要由CSDN通过智能技术生成