js-utilities/element-position/element-position.js

/**
 * 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) {
    var curleft = curtop = 0;

    if (obj.offsetParent) {

        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;

        } while (obj = obj.offsetParent);

        return [curleft, curtop];
    }
}

//function findPos2(element) {
//    var bodyRect = document.body.getBoundingClientRect(),
//        elemRect = element.getBoundingClientRect(),
//        offset = elemRect.top - bodyRect.top;
//
//    return []
//}

//function findPos3(el) {
//    var _x = 0;
//    var _y = 0;
//
//    while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
//
//        _x += el.offsetLeft - el.scrollLeft;
//        _y += el.offsetTop - el.scrollTop;
//
//        el = el.offsetParent;
//    }
//
//    return {top: _y, left: _x};
//}

//var x = getOffset( document.getElementById('header') ).left;


function class_By_Y_Position($id, $activeclass, $inactiveclass, $startoffset, $endoffset, $absoluteoffset) {

    // Default values
    $startoffset = (typeof $startoffset !== 'undefined') ? $startoffset : 0;
    $endoffset = (typeof $endoffset !== 'undefined') ? $endoffset : 0;
    $activeclass = (typeof $activeclass !== 'undefined') ? $activeclass : 'active';
    $inactiveclass = (typeof $inactiveclass !== 'undefined') ? $inactiveclass : 'inactive';
    $absoluteoffset = (typeof $absoluteoffset !== 'undefined') ? $absoluteoffset : false;

    // Variables
    var $elementtop,

    // Get element
        $el = document.getElementById($id),

    // Get Start & End Pixel From Top
        $start = 0,
        $end = 0,

    // get el position

        $elementtop = findPos($el)[1];


    pos = function () {


        console.log("el pos: " + $elementtop);

    },

        // what should we do when scrolling occurs
        runOnScroll = function () {
            var $scrollpos = window.scrollY;

            //console.log('scrollposition');
            //
            //
            //console.log($scrollpos);
            //
            //console.log('offsets');
            //console.log($startoffset);
            //console.log($endoffset);
            //
            //console.log('calcpositions');
            //console.log($start);
            //console.log($end);
            //
            //console.log('positions');

            // 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;

            console.log("Start" + $start);
            break;

        case false:
            $start = ($elementtop + $startoffset);
            $end = ($elementtop + $endoffset);

            console.log("Start" + $start);
            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!")
    }
}