How to push an element outside the screen without the browser just expanding the viewport?

Question

Some times it\'s nice to be able to slide things out of the viewport to hide them, for example when making hide-able sidebars or panels. But when I push something past the r

Answer 1

A simple solution (admittedly not always viable) would be to set position:fixed on the sidebar instead of position:absolute.

FIDDLE

$('.sidebar').on('click', function() {
  $(this).css('right', -250);
});

.sidebar {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 250px;
  -webkit-transition: right 0.2s ease-out;
  -moz-transition: right 0.2s ease-out;
  transition: right 0.2s ease-out;
  cursor: pointer;
  background-color: cornflowerblue;
}

  Click to hide