Original Procedural Imperative Script

gistfile1.txt

‘use strict’;
 var self = this;
 var request = new XMLHttpRequest();
 var categoryHeight = [];
debugger
 request.open(‘GET’, ‘data/data.json’, true);
 request.onload = function() {
 if (request.status >= 200 && request.status < 400) {
 // Success!
 debugger
 var data = JSON.parse(request.responseText);

var i = 0, fragment = document.createDocumentFragment();
 var previousHeaderValue = “”;

while(i < data.length) {
 self.getLists = data[i].items;

self.nums = Object.keys(data[i].items).length;

console.log(data);

//only pass in the length of the items and run the function on this value instead of looping inside of the function otherwise you will be looping unecessarily
 PreCompute(Object.keys(data[i].items).length);

for(var list in self.getLists) {

if (self.getLists.hasOwnProperty(list)) {
 var not_header = “<span>”+self.getLists[list]+”</span>”;

}

var header = “<h3 id=”+ data[i].id +”>” + data[i].header + “</h3>”;
 if (previousHeaderValue !== data[i].header) {
 var header_el = document.createElement(‘li’);
 header_el.innerHTML = header;
 fragment.appendChild(header_el);
 previousHeaderValue = data[i].header;

}

var not_header_el = document.createElement(‘li’);

not_header_el.innerHTML = “<div class=’listItem’>”+not_header+”</div>”;
 fragment.appendChild(not_header_el);

}
 i++;

document.getElementById(“DomLists”).appendChild(fragment);

}

} else {
 alert(“XHR call failed”);
 }
 };

request.onerror = function() {
 alert(“Server Error”);
 };

request.send();
 document.getElementById(“loader”).remove();

function PreCompute(childLength) {
 console.log(childLength);

// self.childrenLength = childLength;
 self.scrollPos = [];

//commented out the unecessary loop now it jsut multiplies the current length of items based on the data[i].items
 // for (x = 0; x < self.result[i].length; x++) {
 self.catHeight = childLength * 120 + 40;
 self.scrollPos.push(self.catHeight);
 self.categoryHeight.push(self.catHeight);
 // }

// var obj = self.scrollPos.reduce(function (o, v, i) {
 // //this always sets self.o to an object
 // self.o = o;
 // //here you are trying to push the value of v into o at position i but position i is always 0
 // self.o[i] = v;
 // //here you are setting self.categoryHeight to self.o which will always have 1 property
 // // self.categoryHeight = self.o;
 // // instead I created a categoryHeight array at the beggining and I’m pushing self.o to it
 // self.categoryHeight.push(self.o);
 // console.log(self.categoryHeight);
 // return self.o;
 // }, {});

}
 // PreCompute();

window.onscroll = function(){
 console.log(self.categoryHeight[0]);
 var newVal = document.getElementById(“DomLists”).childNodes[4].offsetWidth — 73;

//IE doesn’t support window.scrollY for cross browser use: window.pageYOffset
 //First Header
 if (window.pageYOffset > 20 && window.pageYOffset < self.categoryHeight[0]) {

document.getElementById(“1”).className = ‘fixed’;
 document.getElementById(“1”).style.width = newVal+”px”;
 } else {
 document.getElementById(“1”).className = ‘’;
 document.getElementById(“1”).style.width = ‘’;
 }
 //Second Header
 if (window.pageYOffset >= self.categoryHeight[0] && window.pageYOffset <= self.categoryHeight[0] + self.categoryHeight[1]) {
 document.getElementById(“2”).className = ‘fixed’;
 document.getElementById(“2”).style.width = newVal+”px”;
 } else {
 document.getElementById(“2”).className = ‘’;
 document.getElementById(“2”).style.width = “”;
 }
 //Third Header
 if (window.pageYOffset >= self.categoryHeight[0] + self.categoryHeight[1] && window.pageYOffset <= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2])) {
 document.getElementById(“3”).className = ‘fixed’;
 document.getElementById(“3”).style.width = newVal+”px”;
 } else {
 document.getElementById(“3”).className = ‘’;
 document.getElementById(“3”).style.width = “”;
 }
 //Fourth Header
 if (window.pageYOffset >= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2]) && window.pageYOffset <= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2] + self.categoryHeight[3])) {
 document.getElementById(“4”).className = ‘fixed’;
 document.getElementById(“4”).style.width = newVal+”px”;
 } else {
 document.getElementById(“4”).className = ‘’;
 document.getElementById(“4”).style.width = “”;
 }
 //Fifth Header
 if (window.pageYOffset >= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2] + self.categoryHeight[3]) && window.pageYOffset <= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2] + self.categoryHeight[3] + self.categoryHeight[4])) {
 document.getElementById(“5”).className = ‘fixed’;
 document.getElementById(“5”).style.width = newVal+”px”;
 } else {
 document.getElementById(“5”).className = ‘’;
 document.getElementById(“5”).style.width = “”;
 }
 //Sixth Header
 if (window.pageYOffset >= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2] + self.categoryHeight[3] + self.categoryHeight[4]) && window.pageYOffset <= self.categoryHeight[0] + (self.categoryHeight[1] + self.categoryHeight[2] + self.categoryHeight[3] + self.categoryHeight[4] + self.categoryHeight[5])) {
 document.getElementById(“6”).className = ‘fixed’;
 document.getElementById(“6”).style.width = newVal+”px”;
 } else {
 document.getElementById(“6”).className = ‘’;
 document.getElementById(“6”).style.width = “”;
 }

};