<!-- <div class="fixed"></div> -->

<div class="container">
  <ul class="section one is-released">
    <li>panel</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
  <div class="section two">
    <div class="content">panel</div>
  </div>
  <div class="section three">
    <div class="content">panel</div>
  </div>
  <div class="section four">
    <div class="content">panel</div>
  </div>
  <div class="section five">
    <div class="content">panel</div>
  </div>
</div>

body{
  margin: 0;
  padding: 0;
}

.fixed{
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background-image: url(https://images.unsplash.com/photo-1500122710449-d384ebf0891a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=1df2a3596d28b4e9559c4feed0cedf41);
}

*{box-sizing: border-box;}

.container{
  transition: 300ms ease ;
}

.section{
  width: 100%;
  position: fixed;
  box-shadow: inset 0 0 0 5px ghostwhite;
  min-height: 600px;
  color: white;
  list-style: none;
  padding: 25px;
}
.is-released{
  position: relative!important;
}

// UI pattern I'm working on for a client project. Thought I'd share :)
// Gonna be porting this over to a react component in the near future, so be on the lookout for that
// Still working on this, but here's a plain ol javascript way of having a fun fixed-then-scrolling panel ui
// Far as I can tell, this works in Safari, Chrome, Firefox
/* Pretty mobile friendly, too. Only problem is fixed position bug when scrolling in a mobile
browser and the window shrinks, but the panels don't resize accordingly. I'm looking at window 
resize handler to see if that can alleviate the problem. 🎉
*/

var colors=['rebeccapurple','blanchedalmond','mistyrose','goldenrod','dodgerblue','palegoldenrod']
var container = document.querySelector('.container')
var currentIndex = 0
var activePanel = null
var config ={
  scrollItems:[],
  container:null,
  children: null,
  lastScrollTop:0,
  direction: 'down'
}
var createScrollSystem = function(accumulator, node) {
  if(node){
    var children = node.children
    for(var i=children.length-1; i>=0; i--){
      var height = children[i].getBoundingClientRect().height
      accumulator=accumulator+height+Math.ceil(window.innerHeight*.75 - (i*-50) )
      var scrollItem = {
          height: Math.ceil(height)
        , scrollHeight: Math.ceil(accumulator)
        , spaceFromTop: Math.ceil(window.innerHeight*.75 - (-i*-50) )
      }
      config.scrollItems.push(scrollItem)
      children[i].style.top=`${scrollItem.spaceFromTop}px`
      children[i].style.marginBottom=`${scrollItem.spaceFromTop}px`
      children[i].style.zIndex=-i+10
      children[i].style.backgroundColor=colors[i]
    }
    node.style.height=`${Math.ceil(config.scrollItems[config.scrollItems.length-1].scrollHeight+window.innerHeight)}px`
    config.container=node
    config.children=children
    activePanel=config.children[0]
  }
}

createScrollSystem(0,container)

function handleScroll(e){
  
  var length = config.children.length-1

  //handle scroll direction
  var s=window.scrollY
  if(s < config.lastScrollTop){config.direction='up'}
  else{config.direction='down'}
  config.lastScrollTop=s

  //handle panel behavior while user scrolls DOWN the page
  if(config.direction==='down'){
    var scrollIndex=0
      scrollIndex=currentIndex
      if(
      scrollIndex < length &&
      config.children[scrollIndex] === activePanel &&
      config.children[scrollIndex].getBoundingClientRect().bottom <= 0 ){
        scrollIndex+=1
        config.children[scrollIndex].classList.add('is-released')
        currentIndex=scrollIndex
        activePanel=config.children[currentIndex]
      }
  }

  //handle panel behavior while user scrolls UP the page
  if(config.direction==='up'){
    scrollIndex=currentIndex
      if(
        scrollIndex > 0 &&
        currentIndex > 0 &&
        config.children[scrollIndex] === activePanel &&
        config.children[scrollIndex].getBoundingClientRect().top - config.scrollItems[length - scrollIndex].spaceFromTop >= 0 ){
          config.children[scrollIndex].classList.remove('is-released')
          scrollIndex-=1  
          currentIndex=scrollIndex
          activePanel=config.children[currentIndex]
      }
  }

  //handle background color of container
  container.style.backgroundColor=colors[currentIndex]
  if(config.children[length].getBoundingClientRect().bottom <= 0){container.style.backgroundColor='ghostwhite'}
}

window.addEventListener('scroll', function(e){handleScroll(e)})

/* This down here needs to be cleaned up 👇
============================================ */
// class ScrollItem {
//  constructor(height, scrollHeight, spaceFromTop) {
//    this.height = height
//    this.scrollHeight = scrollHeight
//    this.spaceFromTop = spaceFromTop
//  }

//  newScrollHeight(newHeight){ this.scrollHeight = newHeight }

// }
// const CONTAINER = document.querySelector('.container') //the element holding the panels we want to scroll
// const SCROLL_ITEM_NODES  = Array.from( document.querySelectorAll('.menu-container') ) //make an array from the supplied dom elements
// let scrollItems = [] //array to store our new acrollItems created with SCROLL_ITEM_NODES
// let currentScrollIndex = 0 //current index of active panel
// let lastScrollTop = 0 //fulcrum to determine scroll direction
// let totalPanelHeight = 0 //height of all panels passed into the view
// let createScrollSystem = null //store a null value for our function to create scrollItems
// let topSpace = null

// //Ok, let's get down to business:

// // 1. here's our function to generate the ScrollItems
// // we're going to use this function when the page loads, then re-use it if the user updates the page height
// createScrollSystem = function(accumulator, nodes, arr) {
//  for(let i in nodes){
//    let height = nodes[i].getBoundingClientRect().height
//    let width = nodes[i].getBoundingClientRect().width
//    accumulator=accumulator+height+Math.ceil(window.innerHeight*.5 - (i*-40) )
//    let scrollItem = new ScrollItem(
//      Math.ceil(height),
//      Math.ceil(accumulator),
//      Math.ceil(window.innerHeight*.5 - (i*-40) )
//    )
//    arr.push(scrollItem)
//    nodes[i].style.paddingTop=`${scrollItem.spaceFromTop}px`
//  }
//  CONTAINER.style.height=`${Math.ceil(scrollItems[scrollItems.length-1].scrollHeight+window.innerHeight)}px`
//  return arr
// }

// // 2. let's make those ScrollItems
// createScrollSystem(0,SCROLL_ITEM_NODES,scrollItems)
// // console.log(scrollItems)
// // console.log('CONTAINER style height: ',CONTAINER.style.height)
// console.log(document.body.clientHeight)

// // 4. and let's make sure our objects stay in the right place if the user resizes the window
// let initialWindowHeight = window.innerHeight
// let initialWindowWidth = window.innerWidth
// function resizeWindow(e){
//  let height = window.innerHeight
//  let width = window.innerWidth
//  if(height > initialWindowHeight || height < initialWindowHeight) {
//    createScrollSystem(0,SCROLL_ITEM_NODES,scrollItems)
//    // console.log('CONTAINER height: ',CONTAINER.style.height, 'scroll height: ',document.documentElement.scrollHeight)
//  }
//  if(width > initialWindowWidth || width < initialWindowWidth) {
//    // console.log("we're changing the width of the window")
//  }
//  // set the initial window values to the new values
//  initialWindowHeight = window.innerHeight
//  initialWindowWidth = window.innerWidth
// }

// // 5. now let's do some stuff when the user scrolls the page
// currentScrollIndex = 0
// SCROLL_ITEM_NODES[currentScrollIndex].classList.add('is-released')
// function scrollPanels(e) {
//  let scrollDistance = window.pageYOffset || document.documentElement.scrollTop
//  console.log( Math.ceil(scrollDistance) + window.innerHeight, Math.ceil( CONTAINER.getBoundingClientRect().height ) )
//  // console.log( Math.ceil( CONTAINER.getBoundingClientRect().height ) - Math.ceil(st) )
//  // if(st>scrollItems[0].scrollHeight){console.log('0 is outta view')}
//  // if(st>scrollItems[1].scrollHeight){console.log('1 is outta view')}
//  // if(st>scrollItems[2].scrollHeight){console.log('2 is outta view')}
//  console.log(scrollItems[0].scrollHeight)
  
//  // if (st > lastScrollTop){console.log()}
//  // else {console.log()}
//  // lastScrollTop = st //update lastScrollTop so we know which direction we're scrolling when the user changes directions
// }





// window.addEventListener('scroll', _.throttle(scrollPanels, 100), false);
// window.addEventListener('resize', _.throttle(resizeWindow, 1000), false);