您的位置：首页 > 其它

实现拉动右边内容栏左边菜单栏动态变化

2017-10-29 21:18 411 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位置操作</title>
<style>
.aa{
background-color: palegreen;
width: 30%;
float: left;
position: fixed;
top: 10px;
/*left: 20px;*/
}
.bb{
width: 70%;
float: right;
background-color: green;
}
.cc{
background-color: #dddddd;
border-style: solid;
border-color: palegreen;
font-size: 30px;
}
.dd{
background-color: aqua;
height: 2000px;
border-color: black;
border-style: dashed;

}
.ff{
background-color: black;
font-size: 20px;
color: red;

}
</style>
</head>
<body>

<!--offsect:标签距离屏幕左上角的距离有多远，距离顶部多远，距离左边多远-->
<!--position:标签距离自己的父标签的距离有多远,距离顶部多远，距离左边多远-->
<!--heiht:标签的高度,不包括边框-->
<!--weight:标签的宽度,不包括边框-->
<div class="aa">
<div id="cui1" class="cc">第一章</div>
<div id="cui2" class="cc">第二章</div>
<div id="cui3" class="cc">第三章</div>
</div>
<div class="bb">
<div class="dd" sb="cui1">内容一</div>
<div class="dd" sb="cui2">内容二</div>
<div class="dd" sb="cui3">内容三</div>
</div>

<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
window.onscroll = function () {
//            给整个窗口绑定一个滑轮移动的事件，只要滑轮移动就会触发这个事件
var ws = $(window).scrollTop()
//                这个的意思是滑轮移动的距离
$(".bb").children().each(function () {
var off = $(this).offset()
//                    这个的意思是计算每个标签距离顶部和左边的距离
var offtop = off.top
h = $(this).height() + offtop
//                    这个的意思是计算标签距离顶部的高度
//                    console.log(ws)
if(ws>offtop && ws < h){
h = $(this).height() + offtop
var x = $(this).attr("sb")
var tmp_id = "#" + x
$(tmp_id).addClass("ff")
}else {
h = $(this).height() + offtop
var x = $(this).attr("sb")
var tmp_id = "#" + x
$(tmp_id).removeClass("ff")
}
})
}
})

</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航