Displaying a Fixed Bar at the Top of the Page【JavaScript】

JavaScript is a language that can be used for a wide range of purposes, and in this article, we’ll specifically explain how to display a fixed bar at the top of the page. This technique is useful when you want to improve user experience or keep specific information constantly visible on the screen. It’s particularly helpful for situations where you need to fix a navigation bar, important notifications, or an ad area. In this article, we will explain how to create a fixed bar easily by combining CSS and JavaScript to respond to page scrolling.

CSS Settings for Displaying a Fixed Bar at the Top of the Page

To display a fixed bar, you first need to set up the CSS for laying out the HTML elements. Here, we define the style for the fixed bar (#topbar) and explain the basic layout for the entire page.

Example CSS Code

<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>

In the CSS code, we reset the margin and padding for the body to ensure that the overall page design doesn’t break. We also specify styles for #topbar so that it’s fixed to the top of the screen and adjusts to scrolling. The position is set to `position:absolute;` to fix the bar to the top of the screen.

How to Display a Fixed Bar at the Top Using JavaScript

Next, we’ll explain how to display the fixed bar at the top using JavaScript. The bar will always be fixed at the top of the screen and will be displayed in sync with scrolling. Additionally, we’ll implement a feature where the bar can be hidden when the user clicks a “close” link.

Example JavaScript Code

<script type="text/javascript">
var persistclose=0
var startX = 50
var startY = 70
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;
}

//Close the fixed bar
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>

In this JavaScript code, the `staticbar` function controls the operation of the fixed bar. The `stayTopLeft` function adjusts the position of the bar as the page is scrolled, ensuring that the bar remains fixed at the designated position on the screen.

Additionally, the `closebar` function can be used to hide the bar when the user clicks the “close” link. This action is stored using cookies, so even when the page is reloaded, the bar will remain hidden.

HTML for Displaying a Fixed Bar at the Top

Finally, we’ll set up the area for displaying the fixed bar in the HTML. In the example below, the fixed bar and its content are defined using a

<div id="topbar">
This is a fixed bar area. <a href="" onClick="closebar(); return false">Close</a>
</div>
<div id="idWrap">
	<br />
	<br />
    <h1>The fixed bar will always be displayed at the top of the page. Scroll down to see it in action.<br />Click "Close" to hide the bar.</h1>
    <p>jQuery is not used here.</p>
    
</div><!--/idWrap-->