js method to implement the toolbar with a close button always displayed at the bottom of the web page

Author：Eve Cole Update Time：2025-05-28 00:00:03

This article describes the method of implementing js to always display the toolbar at the bottom of the web page with a close button. Share it for your reference. The details are as follows:

This is a very practical code. It adds a toolbar that is always displayed at the bottom of the browser window. You can put announcements, contacts and other information on it. The toolbar of this code also has a close button, which can be closed at any time.

Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Fixed bottom (top) menu</title>

<style>

body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}

li{list-style:none;}img{border:none;}em{font-style:normal;}

a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}

a:hover{color:#000;text-decoration:underline;}

body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}

.bnav{ text-align:left;height:25px;overflow:hidden;width:98%;line-height:25px;background:#fff; margin:0 1%;border:#B4B4B4 1px solid; border-bottom:none;z-index:999;position:fixed;bottom:0;left:0;_position:absolute;/* for IE6 */ overflow:visible;}

.close{position:absolute;right:5px;height:25px;width:16px;text-indent:-9999px;padding-left:10px;}

.close a{background:url(../images/201008/close.gif) no-repeat center; width:16px;display:block;}

.bnav2{height:24px;line-height:24px; margin:1px; margin-bottom:0;background:#E5E5E5; }

.bnav .s1{ position:absolute;left:10px;}

.bnav .s1 img{ padding-top:3px;margin-right:7px;}

.bnav .s2{ position:absolute;right:30px; color:#888;}

.bnav .s2 span{ padding-right:10px;}

.bnav .s2 a{margin:0 6px;}

.rolltext{position:absolute;left:160px;height:25px;line-height:25px;overflow: hidden;}

.rolltext dt,.rolltext dd{float:left;width: auto;}

.rolltext a{display:block;height:25px;overflow:hidden;}

.bnav3{height:25px;width:16px;line-height:25px; margin:0 1%; padding-right:6px;border-bottom:none;z-index:999;position:fixed;bottom:0;right:0;_position:absolute;/* for IE6 */_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */ overflow:visible;}

.bnav3 a{background:url(../images/201008/open.gif) no-repeat center; display:block;height:25px;width:16px; text-indent:-5000px;}

</style>

</head>

<body>

var closeBN = $.cookie("bnav");

if (closeBN == "0"){closeNav();}

function showNav(){

$(".openClose").toggle();

$.cookie("bnav", "1", {expires: 1});

}

function closeNav(){

$(".openClose").toggle();

$.cookie("bnav", "0", {expires: 1});

}

// Single scrolling

function SingleScroll(){

$(".rolltext dd").animate({marginTop:"-25px"},500,function(){

$(this).css({marginTop:"0px"}).find("a:first").appendTo(this);

});

}

$(document).ready(function(){

setInterval("SingleScroll()",3000);

});

</script>

<div>

<span>

</span>

<dl>

<dt>Special Statement:</dt>

<dd>

<a href="#">During the Double Festival, there are dedicated people on duty in the mall. Please feel free to shop</a>

<a href="#">The mobile phones sold by Tianyue are licensed goods from mainland China and national joint guarantee products</a>

<a href="#">We have specially noted some small number of Hong Kong and European market machines</a>

<a href="#">Gods please don't ask for similar questions anymore, the customer service phone number is about to explode</a>

</dd>

</dl>

<span>

<span><a href="#">[Login]</a><a href="#">[Register for free]</a></span><a href="#">Shopping cart</a>|<a href="#">Help Center</a>|<a href="#">Online message</a></a>

</span>

<span><a href="javascript:void(0)" onclick="closeNav()">Close</a></span>

</div>

</body>

</html>

I hope this article will be helpful to everyone's JavaScript programming.