ovsexia-jqdriver
/
poiup.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="#"/>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/layout.css" />
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="src/jqdriver.js"></script>
<title>固定顶部导航</title>
<style>
.poi0 {width:100%; background-color:#08c; height:50px; line-height:50px; color:#fff; text-align:center; font-size:16px;}
.poi1 {background-color:#08c;}
.poi2 {background-color:#000;}
.poi3 {background-color:#08c;}
.poi4 {background-color:#000;}
.poi1.on {position:fixed; top:0; left:0; z-index:10; height:40px;}
.poi2.on {position:fixed; top:50px; left:0; z-index:10;}
.poi3.on {position:fixed; left:0; z-index:10;}
.poi4.on {position:fixed; left:0; z-index:10;}
</style>
</head>

<body>

<div style="height:200px; background-color:#ccc;"></div>

<div class="poi0 poi1" id="asd" jdPoiup jdPoiHeight="40">向下滚动</div>

<div style="height:100px; background-color:#ccc;"></div>

<div class="poi0 poi2" jdPoiup=".poi1">向下滚动</div>

<div style="height:100px; background-color:#ccc;"></div>

<div class="poi0 poi3" jdPoiup=".poi1, .poi2">向下滚动</div>

<div style="height:100px; background-color:#ccc;"></div>

<div class="poi0 poi4" jdPoiup=".poi1, .poi2, .poi3">向下滚动</div>

<div style="height:500px; background-color:#ccc;">1<br />1<br />1<br />1<br /></div>
<div style="height:500px; background-color:#ddd;">2<br />2<br />2<br />2<br /></div>
<div style="height:500px; background-color:#ccc;">3<br />3<br />3<br />3<br /></div>

<script type="text/javascript">
const jd = $('body').jqdriver();
</script>

</body>
</html>