134 lines
3.7 KiB
JavaScript
134 lines
3.7 KiB
JavaScript
/**
|
|
* Created by Simon on 09.05.2017.
|
|
*/
|
|
//The script is very simple.
|
|
// Hand it the object whose position
|
|
// should be calculated and set the
|
|
// variables curleft and curtop to 0:
|
|
|
|
function findPos(obj) {
|
|
"use strict";
|
|
var curleft = 0;
|
|
var curtop = 0;
|
|
if (obj.offsetParent) {
|
|
do {
|
|
curleft += obj.offsetLeft;
|
|
curtop += obj.offsetTop;
|
|
} while (obj === obj.offsetParent);
|
|
return [curleft, curtop];
|
|
}
|
|
}
|
|
|
|
function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset) {
|
|
// "use strict";
|
|
// Default values
|
|
$startoffset = ( "undefined" !== typeof $startoffset ) ? $startoffset : 0;
|
|
$endoffset = ( "undefined" !== typeof $endoffset ) ? $endoffset : 0;
|
|
$activeclass = ( "undefined" !== typeof $activeclass ) ? $activeclass : "active";
|
|
$inactiveclass = ( "undefined" !== typeof $inactiveclass ) ? $inactiveclass : "inactive";
|
|
$absoluteoffset = ( "undefined" !== typeof $absoluteoffset ) ? $absoluteoffset : false;
|
|
|
|
// Variables
|
|
var $elementtop;
|
|
|
|
// Get element
|
|
var $el = document.getElementById($id);
|
|
|
|
// Get Start & End Pixel From Top
|
|
var $start = 0;
|
|
var $end = 0;
|
|
|
|
// Get el position
|
|
var $elementtop = findPos($el)[1];
|
|
|
|
var pos = function () {
|
|
console.log("el pos: " + $elementtop);
|
|
};
|
|
|
|
$start = $elementtop + $startoffset;
|
|
|
|
|
|
// What should we do when scrolling occurs
|
|
var runOnScroll = function () {
|
|
var $scrollpos = window.scrollY;
|
|
|
|
// Check if we are beyond the startpoint
|
|
if ($scrollpos > $start) {
|
|
|
|
|
|
// Now Check if it has an end
|
|
if (
|
|
$endoffset != 0 && // If endposition is set
|
|
$scrollpos > ( $end )// And we are beyond that point
|
|
) {
|
|
|
|
//Remove the class
|
|
addClass($el, $inactiveclass);
|
|
removeClass($el, $activeclass);
|
|
|
|
//Scroll back the amount of end positioning to avoid jumps
|
|
// Todo maybe better to integrate in another function for scrolling/fixing etc.
|
|
//window.scrollTo(0, $end);
|
|
|
|
}
|
|
|
|
// In any other case add it
|
|
else {
|
|
removeClass($el, $inactiveclass);
|
|
removeClass($el, 'before');
|
|
|
|
addClass($el, $activeclass);
|
|
addClass($el, 'after');
|
|
}
|
|
}
|
|
|
|
//In any other case than being beyond start, remove the class
|
|
else {
|
|
addClass($el, $inactiveclass);
|
|
addClass($el, 'before');
|
|
|
|
removeClass($el, $activeclass);
|
|
removeClass($el, 'after');
|
|
}
|
|
};
|
|
|
|
switch ($absoluteoffset) {
|
|
case true:
|
|
|
|
$start = $startoffset;
|
|
$end = $endoffset;
|
|
|
|
break;
|
|
|
|
case false:
|
|
$start = ( $elementtop + $startoffset );
|
|
$end = ( $elementtop + $endoffset );
|
|
|
|
break;
|
|
}
|
|
// And then make each element do something on scroll
|
|
|
|
// Trigger events
|
|
window.addEventListener("load", pos);
|
|
window.addEventListener("load", runOnScroll);
|
|
|
|
document.addEventListener("resize", pos);
|
|
document.addEventListener("resize", runOnScroll);
|
|
|
|
window.addEventListener("scroll", runOnScroll);
|
|
}
|
|
|
|
function getheight($selector) {
|
|
$identifier = $selector.substr(0, 1);
|
|
|
|
if ($identifier === ".") {
|
|
return $element = document.getElementsByClassName(
|
|
$selector.substr(1))[0].getBoundingClientRect().height;
|
|
} else if ($identifier === "#") {
|
|
return $element = document.getElementById(
|
|
$selector.substr(1)).getBoundingClientRect().height;
|
|
} else {
|
|
console.log("Error identifying selector type!");
|
|
}
|
|
}
|