Sticky bar at the bottom of page which remains closed when visiting other pages

Hi there,

I am wondering if it is possible to have a sticky footer bar similar to this newsletter signup:

Which will close when the user clicks the cross/close button, and retain a small button in the footer to make it pop up again. The issue I’m wondering on how to do is to have the div or element remain closed when the user visits a new page without it loading already popped up, if that makes sense? :S

Any ideas would be great.

Thanks.

Hi there toolman,

here is an example…

https://codepen.io/coothead/full/wvBZwOQ

…which, unfortunately, relies on “magic numbers”
mainly in the @media rules. :wonky:

HTML:-

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>footers absolute and fixed</title>

<link rel="stylesheet" href="screen.css" media="screen">

</head>
<body>

 <input id="open" name="r" type="radio" hidden  checked>
 <input id="shut" name="r" type="radio" hidden>

<div id="container">

 <h1>Page Description</h1>

 <div id="footer">
 <div>
  libero bibendum tempus faucibus.
 </div>
  <label for="open">open</label>
<!-- #footer --></div>

<!-- #container --></div>

<div id="sticky-footer">

 <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Curabitur sit amet sem sed libero bibendum tempus faucibus       
  quis mi.
 </div>

  <label for="shut">&#8855;</label>

<!--#sticky-footer --></div>

</body>
</html>

CSS:-

html, body {
    height: 100%;
    margin: 0;
 }

body {
    background-color: #eff;
    font: normal 1em / 1.5em verdana, helvetica, arial, sans-serif;
 }

#container {
    position: relative;
    max-width: 62.5em;
    min-height: 100%;
    padding: 1em;
    margin: 0 auto;
    border: 1px solid #000;
    box-sizing: border-box;
    background-color: #fff;
 }

h1 {
    font-size: 1.5em;
    color: #444;
    text-align:center;
 }

#footer, 
#sticky-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    padding: 1em;
    box-sizing: border-box;
    background-color: #080;
    color: #fff;
 }

#sticky-footer {
    position: fixed;
    background-color: #008;
 }
 
#footer div, 
#sticky-footer div {
    flex: 1  1  auto;
 }

#footer label, 
#sticky-footer label {
    flex: 0  0  5em;
    padding-bottom: 0.25em;
    font-size: 1em;
    text-align: right;
    cursor: pointer;
 }

#sticky-footer label {
    flex: 0  0  2em;
    font-size: 4em;
 }

#shut:checked ~  #sticky-footer {
    display: none;
 } 

#open:checked ~ #container {
    margin-bottom: 6em;
 }

@media ( max-width: 44em ) {
#open:checked ~ #container {
    margin-bottom: 8em;
  }
 }

@media ( max-width: 32em ) {
#open:checked ~  #container {
    margin-bottom: 10em;
  }
 }

@media ( max-width: 25em ) {
#open:checked ~  #container {
    margin-bottom: 13em;
  }
 }

@media ( max-width: 22.5em ) {
#open:checked ~  #container {
    margin-bottom: 16em;
  }
 }

@media ( max-width: 19em ) {
#open:checked ~  #container {
    margin-bottom: 21em;
  }
 }

coothead

1 Like

Please ensure there is also an easy way for anyone navigating by keyboard to close the bar. (The usual method is Esc.)

2 Likes

You can lose all of those media queries and magic numbers if you use position:sticky instead of fixed.

e.g.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>footers absolute and fixed</title>

<link rel="stylesheet" href="screen.css" media="screen">
<style>
html, body {
    height: 100%;
    margin: 0;
 }

body {
    background-color: #eff;
    font: normal 1em / 1.5em verdana, helvetica, arial, sans-serif;
 }

#container {
    display:flex;
	flex-direction:column;
    max-width: 62.5em;
    min-height: 100%;
	min-height:100vh;
    padding: 1em;
    margin: 0 auto;
    border: 1px solid #000;
    box-sizing: border-box;
    background-color: #fff;
 }

h1 {
    font-size: 1.5em;
    color: #444;
    text-align:center;
 }

#footer, 
#sticky-footer {
    display: flex;
	padding: 1em;
    box-sizing: border-box;
    background-color: #080;
    color: #fff;
}
#footer{margin:auto -1em -1em;}
#sticky-footer {
	position: fixed;
	position:-webkit-sticky;
	position:sticky;
	bottom:0;
	left:0;
	right:0;
	padding:1em;
    background-color: #008;
 }
 
#footer div, 
#sticky-footer div {
    flex: 1  1  auto;
 }

#footer label, 
#sticky-footer label {
    flex: 0  0  5em;
    padding-bottom: 0.25em;
    font-size: 1em;
    text-align: right;
    cursor: pointer;
 }

#sticky-footer label {
    flex: 0  0  2em;
    font-size: 4em;
 }

#shut:checked ~  #sticky-footer {
    display: none;
 } 



</style>
</head>
<body>

 <input id="open" name="r" type="radio" hidden  checked>
 <input id="shut" name="r" type="radio" hidden>

<div id="container">
 <h1>Page Description</h1>

 <div id="footer">
 <div>
  libero bibendum tempus faucibus.
 </div>
  <label for="open">open</label>
<!-- #footer --></div>

<!-- #container --></div>

<div id="sticky-footer">

 <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  Curabitur sit amet sem sed libero bibendum tempus faucibus       
  quis mi.
 </div>

  <label for="shut">&#8855;</label>

<!--#sticky-footer --></div>

</body>
</html>

Yes that needs to be built in :slight_smile:

That sounds as though you need to store a cookie (or local storage) when the bar has been hidden and refer to that cookie before you show it again and is really a question for the js forum. :wink:

4 Likes

Thanks Paul for bringing me back down to earth. :biggrin:

I’ve got so used to ensuring that code worked in
IE11 and, as it does not render position:sticky,
simply ignored it. :wonky:

As “Microsoft” has now dropped support for it, I think
that I can now follow suit. :winky:

coothead

3 Likes

Hi all,

Thanks for the replies.

I now have the bar in place on the page, but wondering how I go about setting it so it doesn’t keep popping up on each page. Which would be better to use, cookies or local storage?