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>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  <meta charset=utf-8>
  <title>Sticky Footer with Slider</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="page-header">
        <h1 class="text-center">Sticky Footer with Slider</h1>
      </div>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
    <div class="row" style="margin: 1em auto;">
      <button type="button" class="btn btn-primary btn-lg">Toggle Sidebar</button>
    </div>
  </div>
  <footer>
    <p class="text-center">This is a Sticky Footer</p>
  </footer>
  <aside>
      <div class="page-header">
        <h1 class="text-center">Sidebar</h1>
    <nav class="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
        <li><a href="#">foo</a></li>
        <li><a href="#">bar</a></li>
        <li><a href="#">baz</a></li>
      </ul>
    </nav>
  </aside>  
</body>
</html>
 
$(function () {
  
  $('button').click(function () {
    var marginR = $(".container").css("margin-right") == sWidth+"px" ? "auto" : sWidth;
    $(".container").css("margin-right", marginR);
    $('html').toggleClass('sidebar');
  });
  
});
​
function getScrollbarWidth() {
    var outer = document.createElement("div");
    outer.style.visibility = "hidden";
    outer.style.width = "100px";
    outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
​
    document.body.appendChild(outer);
​
    var widthNoScroll = outer.offsetWidth;
    // force scrollbars
    outer.style.overflow = "scroll";
​
    // add innerdiv
    var inner = document.createElement("div");
    inner.style.width = "100%";
    outer.appendChild(inner);        
​
    var widthWithScroll = inner.offsetWidth;
​
    // remove divs
    outer.parentNode.removeChild(outer);
​
    return widthNoScroll - widthWithScroll;
}
var sWidth = getScrollbarWidth();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers