.container {
  height: 3000px;
  margin-top:150px;
}
body { background-color:#eee;}

.foo {
  position: fixed;
  left: 0;
  font-size: 2rem;
  height: 25%;
  width: 48%;
  color: azure;
  background-color: #008cff;
  padding:10px;
}

.bar {
  position: fixed;
  right: 0;
  font-size: 2rem;
  height: 25%;
  width: 48%;
  color: azure;
  background-color: #00ad85;
  padding:10px;
}

.nonscrolled {
  height: 25%;
  background-color: #00ad85;
}

.scrolled {
  height: 75%;
  background-color: #008cff;
}