Layout Test Iris

by mgoetzke

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div class="app">
  <div class="apptools">
    App
  </div>
  <div class="appcontent">
    <div class="pagetools">
      <span>Do</span>
      <span flex></span>
      <span>Side</span>
    </div>
    <div class="pagecontent">
      <div class="pagebody">
        BODY
        <p style="width:100px">
          Lorem ipsum dolor sit amet, mei id detraxit iudicabit instructior. Vim id fugit sanctus definiebas, ex mea partem recteque. Laudem tractatos nec te. Ne sale errem soluta eos, id posse integre pri. Altera ceteros expetenda sed ad, eam at enim quas platonem.
          Odio suscipit qui ea, nec ad admodum detracto, ut his labore tritani gubergren. Nam in odio inani, pro eu alia veniam corrumpit. Vix adhuc novum ex, sed nibh tincidunt ne. Ludus commune intellegam vel ex, mel platonem qualisque scripserit te.
          Sit eu tantas nullam eirmod. Per te solet saepe, has ex elitr primis legimus. Audire regione singulis ei per, cu veri facilis consectetuer eos, natum volumus apeirian his ne. Eu vis simul causae, eam no idque postea, cum veniam partiendo assentior
          ut. Pri ponderum voluptatibus ut, in vis debitis gloriatur, ea qui autem aliquid posidonium. Sea ne natum consul. Ipsum omnesque moderatius id eos, eos commodo tacimates corrumpit ad, ex zril quidam diceret his. Ex alterum phaedrum sensibus
          sea, ne appetere moderatius mel, id malis facilisi has. Qui ei mazim ancillae disputando. Mea in torquatos democritum, pri ad porro melius vivendo. Eu eos clita integre, vix at insolens accusamus. Ne eos ludus omnes interesset, te vel adhuc
          facilisis, tation incorrupte eu qui. Vis at autem legere, laudem mollis repudiandae ius ex. An pri partem suscipiantur. Vocent gubergren evertitur vis eu. Vis affert dolores suavitate ex. Vel quis quas detraxit no, per inani scriptorem ei.quidam
          diceret his. Ex alterum phaedrum sensibus sea, ne appetere moderatius mel, id...

CSS

html,
body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.app {
  flex: 1;
  flex-direction: column;
  background: lightgray;
  display: flex;
}

.apptools {
  height: 128px;
  background: blue;
}

.appcontent {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pagetools {
  display: flex;
  flex-direction: row;
  height: 64px;
  background: green;
}

*[flex] {
  flex: 1;
}

.pagecontent {
  flex-direction: row;
  display: flex;
  flex: 1;
  background: red;
}

.pagebody {
  border: 10px solid yellow;
  flex: 1;
  overflow-y: auto;
  padding-bottom: 128px;
}

.pagesidebar {
  flex-basis: 200px;
  overflow-y: auto;
}

JavaScript

$(document).ready( ()=>{
	$('.pagebody').scroll(function(){
  	var scroll = $('.pagebody').scrollTop();
    console.log(scroll);
    
    const MIN_APPBAR_HEIGHT = 64;
    const MAX_APPBAR_HEIGHT = 128;
    const MIN_PAGEBAR_HEIGHT = 64;
    scroll = Math.max(0, scroll*0.1);
    
    var ah = Math.max(MIN_APPBAR_HEIGHT,MAX_APPBAR_HEIGHT - scroll * 1);
    scroll -= MAX_APPBAR_HEIGHT - ah;
    
    console.log('ah', ah, scroll)
    $('.apptools').css('height',`${ah}px`)
    
    var pth = Math.max(0,MIN_APPBAR_HEIGHT + MIN_PAGEBAR_HEIGHT - scroll * 1);
    var offset = MIN_APPBAR_HEIGHT + MIN_PAGEBAR_HEIGHT - pth;
    scroll -= offset;
    
    console.log('offset', offset)
    $('.apptools').css('margin-top', `-${offset}px`);
    
    if(scroll > 0){
    	console.log('moved even further');
    }
  });
})