<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery侧边栏固定和跟随</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.nav {
width:100%;
height:427px;
background-color:#222;
}
.detail {
width:100%;
height:5000px;
position:relative;
background-color:#fff;
}
.detail-right {
float:right;
width:50%;
height:100px;
background-color:red;
}
.detail .fiesd-top {
position:fixed;
right:0;
top:0;
}
.detail .fiesd-bottom {
position:absolute;
right:0;
bottom:0;
}
.fotter {
width:100%;
height:1000px;
background-color:yellow;
}
</style>
</head>
<body>
<section class="detail">
<div class="nav"></div>
<div class="detail-right">
</div>
</section>
<section class="fotter"></section>
<script>
$(window).scroll(function() {
var t = $(document).scrollTop();
var r = $(".detail-right").height()
var s = $(".detail").height();
s = s - r;
if (t < 427) {
$(".detail-right").removeClass('fiesd-top');
} else {
$(".detail-right").addClass('fiesd-top');
}
if (t > s) {
$(".detail-right").removeClass('fiesd-top');
$(".detail-right").addClass('fiesd-bottom');
} else {
$(".detail-right").removeClass('fiesd-bottom');
}
});
</script>
</body>
</html>© 版权声明
本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。Mail To:718588255@qq.com
THE END
用户56869002
2小时前
0
感谢分享，试试看。网易云资源越来越少了