Create Fixed Sticky Footer Notification Bar in HTML

Abhigyan Singh 16th Aug 2020

This tutorial will demonstrate how to create fixed footer bar in html. Here we use simple HTML code to create fixed bar. This type of Sticky footer bar is very important when we need to show some main feature of website, some highlight or any notification because this sticky bar visible every time.

When user scroll the web page, the upper content will move upward but this fixed or sticky bar remain on same place where we fix it. It captures the user attention. So that we can use it for some important notification purpose.

This fixed bottom notification bar is compatible for all browsers. But we need to avoid it in mobile screen because fix the mobile screen and user cannot view the full website easily in small screen device.

You can also read article for Web Push Notification in browser for any web application.

Code Implementation:

For sticky bar, We just need to fixed the position. The simple CSS code given below:

<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font: 14px/22px 'robotoregular',sans-serif;
position: relative;
background-color: #fff;
}

.top_bar
{
background: none repeat scroll 0 0 rgba(0,0,0,0.7);
bottom: 0;
padding: 5px 0;
position: fixed;
width: 100%;
z-index: 10;
height:100px;
}

.fi_bt {
color: #fffc00;
display: block;
font-size: 18px;
font-weight: 600;
margin: 0 0 3px;
text-align: center;
}

</style>

Here in this CSS code, We make bottom:0; and position:fixed;. By using this line it always fixed that bar to bottom fixed. we can change the position.

HTML Code Here:

<body>

// Your main code goes here.

<div class="top_bar">
<div class="fi_bt">Fixed Bottom Notification Bar</div>
</div>
</body>

By using this simple line of code, we can easily make sticky footer bar.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk