老师，左侧楼层导航，屏幕滚动到楼层位置，导航相应楼层显示文字
这么写为什么只有1楼实现了效果？
//左侧楼层导航
$.fn.FloorNav=function(){
var ui=$(this);
var floorNav=$('.floor-nav');
var floor1=$('.floor-nav .item1',ui);
var floor2=$('.floor-nav .item2',ui);
var floor3=$('.floor-nav .item3');
var floor4=$('.floor-nav .item4');
var floor5=$('.floor-nav .item5');
$(window).on('scroll',function(){
var top=$('html,body').scrollTop();
if(top>587){
floorNav.show();
}else{
floorNav.hide();
}
if(top>737 && top<1261){
floor1.text('服装');
floor1.css({
color:'red',
'font-size':'13px'
})
}else if(top>1261 && top<1784){
floor2.text('F2');
floor2.css({
color:'#999',
'font-size':'15px'
})
}
})
floor1
.on('mouseover',function(){
floor1.text('服装');
floor1.css({
color:'red',
'font-size':'13px'
})
})
.on('mouseout',function(){
floor1.text('F1');
floor1.css({
color:'#999',
'font-size':'15px'
})
})
.on('click',function(){
$(window).scrollTop(737);
})
floor2
.on('mouseover',function(){
floor2.text('美妆');
floor2.css({
color:'red',
'font-size':'13px'
})
})
.on('mouseout',function(){
floor2.text('F2');
floor2.css({
color:'#999',
'font-size':'15px'
})
})
.on('click',function(){
$(window).scrollTop(1261);
})
floor3
.on('mouseover',function(){
floor3.text('手机');
floor3.css({
color:'red',
'font-size':'13px'
})
})
.on('mouseout',function(){
floor3.text('F3');
floor3.css({
color:'#999',
'font-size':'15px'
})
})
.on('click',function(){
$(window).scrollTop(1784);
})
floor4
.on('mouseover',function(){
floor4.text('家电');
floor4.css({
color:'red',
'font-size':'13px'
})
})
.on('mouseout',function(){
floor4.text('F4');
floor4.css({
color:'#999',
'font-size':'15px'
})
})
.on('click',function(){
$(window).scrollTop(2312);
})
floor5
.on('mouseover',function(){
floor5.text('数码');
floor5.css({
color:'red',
'font-size':'13px'
})
})
.on('mouseout',function(){
floor5.text('F5');
floor5.css({
color:'#999',
'font-size':'15px'
})
})
.on('click',function(){
$(window).scrollTop(2837);
})
}
正在回答
你好同学 , 需要整个页面代码上传 ,才能准确的测试效果 . 因为代码太多 , 还是建议同学先把其他的完成 , 然后上传作业 . 批复作业老师会帮助指导你的 .
祝学习愉快 !
html代码：
<!--左侧楼层导航-->
<div class="floor-nav">
<div id="floor1" class="item item1"><a href="#f1">F1</a></div>
<div class="item item2"><a href="#f2">F2</a></div>
<div class="item item3"><a href="#f3">F3</a></div>
<div class="item item4"><a href="#f4">F4</a></div>
<div class="item item5"><a href="#f5">F5</a></div>
</div>
css代码：
.floor-nav{
display:none;
width:40px;
height:205px;
position:fixed;
left:0;
top:50%;
text-align:center;
}
.floor-nav .item{
width:26px;
height:40px;
border-top:1px solid #ddd;
color:#999;
line-height:40px;
margin:0 auto;
}
.floor-nav .item a{
color:#999;
}
.floor-nav .item:hover{
cursor:pointer;
}
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星