jQueryを使用せずページ上部に固定バーを表示するJs
- 2019.08.02
- JavaScript
- ヘッダー固定

今回はjQueryを使用せずページ上部にJavaScriptを使用して固定バーを表示してみます。
1.CSSの記述
バーのスタイルを指定します、調整してみて下さい。
<style type="text/css"> <!-- body{ margin:0; padding:0; } h1{ font-size:16px; font-weight:normal; line-height:2.0em; text-align:center; padding:70px 0 15px 0; } p{ font-size:14px; font-weight:normal; text-align:center; } #idWrap{ width:700px; height:4000px; margin:0 auto; text-align:left; } #topbar{ position:absolute; border: 1px solid black; padding: 5px; width: 90%; visibility: hidden; z-index: 100; text-align:center; } #topbar a{ color:#333; text-decoration:underline; } --> </style>
2.JavaScriptの記述
<script type="text/javascript"> var persistclose=0 var startX = 50 var startY = 10 var verticalpos="fromtop" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } //固定バーを閉じる function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar </script>
3.HTMLの記述例
<div id="topbar"> 固定バーエリアです。 <a href="" onclick="closebar(); return false">閉じる</a> </div>
ソース元:Dynamic Drive DHTML scripts- Floating Top Bar script
固定メニューや広告エリア等、応用ができそうですね。
-
前の記事
コンテンツエリアに収まりきれないテキストや画像を上下移動でスライド表示 2019.08.01
-
次の記事
jQueryを使用せず画像(img)のsrc要素を切替える方法 2019.08.03