上のナビゲーションバーはスクロールバーに従って上下にスクロールします.または下に表示されます.
2362 ワード
第一の場合:
上のナビゲーションバーはスクロールバーの上下にスクロールします.コードはネットワークから来ます.
上のナビゲーションバーはスクロールバーの上下にスクロールします.コードはネットワークから来ます.
<style>
body {
height:2000px;
}
div {
position:absolute; right:40px; top:40px;
width:90%; height:30px;
background:#ddd;
}
</style>
<div id="test"> </div>
<script type="text/javascript">
function toolbar(el) {
el = typeof el == 'string' ? document.getElementById(el) : el;
var elTop = el.offsetTop;
var sTop = 0;
window.onscroll = function () {
sTop = document.body.scrollTop || document.documentElement.scrollTop;
if (sTop > elTop) {
el.style.top = "0";
el.style.position = "fixed"
} else {
el.style.top = elTop + 'px';
el.style.position = "absolute"
}
}
}
toolbar('test');
</script>
</code></pre>
<br/> ：
<blockquote>
<p> （ ）</p>
</blockquote>
<pre><code>
<title/>
<style>
body {
height:2000px;
}
div {
position:absolute; right:40px; bottom:0px;
width:90%; height:30px;
background:#ddd;
}
</style>
<div id="test"> </div>
<script type="text/javascript">
function rollbar(bar) {
bar = document.getElementById(bar);
window.onscroll = function () {
bar.style.position = "fixed";
bar.style.bottom = "0";
}
}
rollbar('test');
</script>
</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div>