Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <nav class="bottom-bar">
      <span>link 1</span>
      <span>link 2</span>
      <span>link 3</span>
    </nav>
    <h1>Hello world!!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <h1>Hello world!!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <h1>Hello world!!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur itaque id ipsum reiciendis laboriosam odit delectus maiores incidunt. Id rerum fuga labore consequatur! Assumenda quas voluptatem ut ex deleniti commodi. </p>
    <h1>Bottom of the page</h1>
  </div>
  <div id="debug"></div>
</body>
</html>
 
body{
  margin: 0;
}
​
.bottom-bar{
  position: fixed;
  background: pink;
  padding: 10px;
  width: 100%;
  bottom:0;
}
​
.bottom-bar span{
  cursor: pointer;
}
​
​
​
.bottom-bar{
  display: none;
}
​
.active-menu .bottom-bar{
  display: block;
}
​
#debug{
  position: fixed;
  background: blue;
  padding: 10px;
  width: 100%;
  top: 0;
  color: white;
  font-family: monospace;
}
​
#debug:before{
  content: "debug: "
}
​
 
window.addEventListener("resize", function(){
  var root = document.documentElement;
​
  if(resizingSmaller()){
    root.classList.add("active-menu");
    // debug
    document.getElementById("debug").innerHTML = "resizing smaller";
  }else{
    root.classList.remove("active-menu");
    // debug
    document.getElementById("debug").innerHTML = "resizing larger";
  }
  
});
​
function resizingSmaller(){
  var _return = window.lastHeight > window.innerHeight ? 1 : 0;
  window.lastHeight = window.innerHeight;
  return !!_return;
}
​
​
// debug stuff
var spans = document.querySelectorAll("nav span");
var i = spans.length;
while(i--){
  spans[i].addEventListener("click", function(e){
    document.getElementById("debug").innerHTML = "clicked " + e.target.innerHTML;
  })
}
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers