<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>layout</title>
<style>
* {
padding: 0;
margin: 0;
}
.page-header {
height: 48px;
background: #009C42;
}
.page-content {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.page-footer {
height: 55px;
background: #1f5350;
}
.a1 {
height: 300px;
background: #eee;
}
.a2 {
height: 600px;
background: #999;
}
.a3 {
height: 300px;
background: #eee;
}
.nav {
height: 50px;
box-sizing: border-box;
background: #f50;
width: 100%;
top: 48px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<header class="page-header"></header>
<article class="page-content">
<div class="a1"></div>
<div class="a2">
<nav class="nav"></nav>
</div>
<div class="a3"></div>
</article>
<footer class="page-footer"></footer>
</div>
<script>
$(function () {
$('.page-content').height($(window).height() - $('.page-header').outerHeight() - $('.page-footer').outerHeight());
$('.page-content').on('scroll', fixedNav);
$('.page-content').on('touchmove', fixedNav);
});
function fixedNav() {
var offsetTop = $('.a2').offset().top;
if (offsetTop <= $('.page-header').outerHeight()) {
$('.nav').css({position: 'fixed'});
} else {
$('.nav').css({position: 'static'});
}
}
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
