<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<style>
body{
margin: 0px;
padding: 0px;
}
p {
text-align: center;
}
.nav {
border: 1px solid green;
position: relative;
height: 30px;
background: lightcoral;
}
.fixednav {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
</style>
</head>
<body>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<div class="nav">内容到达一定高度,置顶</div>
<div class="box" style="width: 100%;height: 1100px;background: lavender;">
</div>
<div class="box" style="width: 100%;height: 1100px;background: pink;">
</div>
</body>
</html>
<script src="../jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
//刷新回顶部
window.onbeforeunload = function() {
var n = window.event.screenX - window.screenLeft;
var b = n > document.documentElement.scrollWidth - 20;
if(!(b && window.event.clientY < 0 || window.event.altKey)) {
//这里可以放置你想做的操作代码
$(window).scrollTop(0);
}
}
//内容到达一定高度,置顶
var nav = $(".nav"); //得到导航对象
var win = $(window); //得到窗口对象
var sc = $(document); //得到document文档对象。
win.scroll(function() {
if(sc.scrollTop() >= 60) {
nav.addClass("fixednav");
// $(".navTmp").fadeIn();
} else {
nav.removeClass("fixednav");
// $(".navTmp").fadeOut();
}
})
})
</script>
内容滚动到顶部,固定在顶部
最新推荐文章于 2023-11-21 17:03:55 发布