快捷导航
发新帖
返回列表
0 829
电梯直达  跳转到指定楼层

[提问] 问题

L1587997|中级会员 |勤币 273 |学币 0
发表于 2019-12-10 12:03 | 复制链接 | 打印 | 上一主题 | 下一主题
鼠标滑动,左侧导航随着页面切换改变颜色出现这样得错误怎么解决
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动条知识点</title>
<!--windom:是对窗口操作-->
<style>
  *{padding: 0;margin: 0}
.top{width: 100px;height: 100px;background-color: black;color: #FF0004;font-size: 40px;text-align: center;line-height: 2em;position: fixed;bottom: 100px;right: 60px;display: none;cursor: pointer;}
.daohan{width: 40px;height: 200px;position:fixed;left: 60px;bottom: 200px;}
.daohan .btn{width: 40px;height: 50px;background-color: #333;text-align: center;line-height: 2em;cursor: pointer}
.daohan .on{background-color: red;}
    </style>
</head>
<body>
<div class="top">↑</div>
<div class="daohan">
     <div class="btn">1</div>
     <div class="btn">2</div>
  <div class="btn">3</div>
  <div class="btn">4</div>
</div>
<div class="box" style="height: 600px;background-color: red">11111</div>
<div class="box" style="height: 600px;background-color: yellow">22222</div>
<div class="box" style="height: 600px;background-color: blue">33333</div>
<div class="box" style="height: 600px;background-color: green">44444</div>
</body>
<script src="js/jquery.js"></script>
<script>
$(function(){
var i=0

$(window).scroll(function(){
  var st=$(window).scrollTop()
  if(st>=300){
   $(".top").show()
  }else{
   $(".top").hide()
  }
  
  
})
$(".top").click(function(){
  $("html").animate({scrollTop:0},300)
})

$(".daohan .btn").click(function(){
  var idx=$(this).index()
  var boxT=$(".box").eq(idx).offset().top
  $("body,html").animate({scrollTop:boxT})
})
$(".box").each(function(i){
  var ft=$(".box").eq(i).offset().top;
  var st=$(window).scrollTop()
  if(st>ft){
   $(".btn").eq(i).addClass("on").siblings().removeClass("on")
  }
})
})
</script>
</html>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
举报 使用道具
| 回复

共0个回复 最后回复于 2019-12-10 12:03

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表