134 lines
3.8 KiB
JavaScript
134 lines
3.8 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!" );
|
|
}
|
|
}
|