鼠标滚动到某个楼层,某个楼层的楼层按钮高亮显示,点击左边的楼层按钮,页面直接定位到这个楼层
html:
<div style="height: 100px;text-align: center" class="head">头部</div>
<div class="main">
<div style="background-color: red;" class="louti">服饰</div>
<div style="background-color:chartreuse;" class="louti">美妆</div>
<div style="background-color: indianred;" class="louti">手机</div>
<div style="background-color: darkgreen;" class="louti">家电</div>
<div style="background-color: beige;" class="louti">数码</div>
<div style="background-color: hotpink;" class="louti">运动</div>
<div style="background-color: #abcdef;" class="louti">居家</div>
<div style="background-color: lightpink;" class="louti">母婴</div>
<div style="background-color: aqua;" class="louti">食品</div>
<div style="background-color: #abcdef;" class="louti">图书</div>
</div>
<ul>
<li>1F<span>服饰</span></li>
<li>2F<span>美妆</span></li>
<li>3F<span>手机</span></li>
<li>4F<span>家电</span></li>
<li>5F<span>数码</span></li>
<li>6F<span>运动</span></li>
<li>7F<span>居家</span></li>
<li>8F<span>母婴</span></li>
<li>9F<span>食品</span></li>
<li>10F<span>图书</span></li>
</ul>
css:
* {
margin:0;
padding:0;
}
.main div {
90%;
height:400px;
text-align:center;
margin:10px auto;
}
li {
list-style-type:none;
40px;
height:40px;
line-height:40px;
text-align:center;
border-bottom:1px dashed #aaa;
position:relative;
}
li.hover {
background-color:#c81623;
}
/*鼠标移动上去后的效果*/
li span {
display:none;
position:absolute;
40px;
height:40px;
text-align:center;
}
li.hover span {
display:block;
top:0;
left:0;
background-color:#c81623;
color:white;
}
/*鼠标移动上去后的效果*/
ul {
position:fixed;
left:10px;
top:100px;
display:none;
}
li span.cli {
display:block;
top:0;
left:0;
background-color:#c81623;
color:white;
}
js:
//鼠标移动上去的事件
$(function() {
$("ul li").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
var mark = 1;
//鼠标点击事件
$("ul li").click(function() {
$(this).find("span").addClass("cli");
$(this).siblings().find('span').removeClass("cli"); //siblings为找到该li的所有同辈元素;
});
//鼠标点击跳转效果
$("ul li").click(function() {
mark = 2;
var index = $(this).index();
var h = $(".louti").eq(index).offset().top; //offset为获取匹配元素在当前视口的相对偏移,有top和left;
$('body').animate({
scrollTop: h
}, 500, function() { //scrollTop为获取匹配元素相对滚动条顶部的偏移。
mark = 1
})
});
$(window).scroll(function() {
var H = $(this).scrollTop(); //获取滚动条的高度
if (mark == 1) {
$(".louti").each(function() {
index = $(this).index();
h = $(".louti").eq(index).offset().top;
if (H >= h) {
$("li").eq(index).find("span").addClass("cli");
$("li").eq(index).siblings().find("span").removeClass("cli")
}
});
}
//当滚动到一定高度时楼梯式导航消失与显示
var $height = $(window).scrollTop();
var $main_h = $(".main").offset().top;
console.log($height);
console.log($main_h);
if ($height > $main_h) {
$("ul").fadeIn(600);
} else {
$("ul").fadeOut(600);
}
})
})