<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.test {
margin: 900px auto 500px;
width: 800px;
height: 600px;
position: relative;
background-color: #00ac61;
}
.target {
position: absolute;
left: 200px;
width: 400px;
height: 300px;
opacity: 0;
background-color: palevioletred;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="test">
<div class="target">
test test test
</div>
</div>
<script>
$(function () {
var targetHeight = $(".test").offset().top; //获取test绑定元素到html边界的高的距离
$(window).scroll(function () { //滑动滚动条的时候
slideIn($(".target"), 150); //触发函数
});
function slideIn(obj, left) {
var targetHeight = obj.offset().top; //获取target绑定元素到html边界的高的距离
var scrollTop = $(this).scrollTop(); //获取滚动高度
if (scrollTop > targetHeight - 500) { //如果滚动距离大于 test绑定元素到html边界的高的距离时 就触发效果
obj.animate({
left: left + 'px',
opacity: 1,
filter: 'Alpha(opacity=90)'
}, 500); //淡入效果
}
};
});
</script>
</body>
</html>
用css jq如何实现网页滚动条滚动到相应位置才显示.
最新推荐文章于 2024-06-11 15:23:22 发布