Comperi
closed #676,#666,#665,#681,#677,#687,#685,#684
This commit is contained in:
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
body header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ff00ff;
|
||||
color: #006505;
|
||||
font-weight: 700;
|
||||
-webkit-transition: all 1s ease-in-out;
|
||||
transition: all 1s ease-in-out; }
|
||||
body header.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
margin: 0 25%; }
|
||||
body header ul {
|
||||
list-style: none; }
|
||||
body header ul li {
|
||||
display: inline-block;
|
||||
padding-left: 25px; }
|
||||
body section {
|
||||
width: 100%;
|
||||
padding: 200px 25%;
|
||||
box-sizing: border-box;
|
||||
color: #bfffc0;
|
||||
background-color: #00a0d2; }
|
||||
body footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
margin: 0 25%;
|
||||
background-color: white;
|
||||
-webkit-transition: all 1s ease-in-out;
|
||||
transition: all 1s ease-in-out; }
|
||||
body footer.relative {
|
||||
position: relative;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin: 0; }
|
||||
body footer ul {
|
||||
list-style: none; }
|
||||
body footer ul li {
|
||||
display: inline-block;
|
||||
padding-left: 25px; }
|
||||
|
||||
/*# sourceMappingURL=element-position.css.map */
|
||||
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Element-Position</title>
|
||||
<style src="element-position.css"></style>
|
||||
<link rel="stylesheet"
|
||||
href="element-position.css"
|
||||
type="text/css">
|
||||
<script src="../../classes/classes.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="../element-position.js"
|
||||
type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<ul>
|
||||
<li>Item</li>
|
||||
<li>Item</li>
|
||||
<li>Item</li>
|
||||
<li>Item</li>
|
||||
</ul>
|
||||
</header>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<section>Lorem ipsum dolor sit amet,
|
||||
consectetuer adipiscing elit.
|
||||
Aenean commodo ligula eget dolor.
|
||||
Aenean massa. Cum sociis natoque penatibus et
|
||||
magnis dis parturient montes, nascetur ridiculus mus.
|
||||
Donec quam felis, ultricies nec, pellentesque eu,
|
||||
pretium quis, sem. Nulla consequat massa quis enim.
|
||||
Donec pede justo, fringilla vel, aliquet nec,
|
||||
vulputate eget, arcu. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Nullam dictum
|
||||
felis eu pede mollis pretium. Integer tincidunt.
|
||||
Cras dapibus. Vivamus elementum semper nisi. Aenean
|
||||
vulputate eleifend tellus. Aenean leo ligula, porttitor
|
||||
eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
|
||||
dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
|
||||
nulla ut metus varius laoreet. Quisque rutrum. Aenean
|
||||
imperdiet. Etiam ultricies nisi vel augue. Curabitur
|
||||
ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.
|
||||
Maecenas tempus, tellus eget condimentum rhoncus, sem quam
|
||||
semper libero, sit amet adipiscing sem neque sed ipsum.
|
||||
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
|
||||
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien
|
||||
ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet
|
||||
orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris
|
||||
sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo
|
||||
eget bibendum sodales, augue velit cursus nunc.
|
||||
</section>
|
||||
<footer id="footer">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="contact"></span>
|
||||
Contact
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="top"></span>
|
||||
Top
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
var height = document.height;
|
||||
|
||||
class_By_Y_Position("header", "fixed", "relative", 0, 0, false);
|
||||
|
||||
class_By_Y_Position("footer", "relative", "fixed", 0, findPos(document.getElementById('footer'))[1], true);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
header {
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
|
||||
padding: 25px;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: #ff00ff;
|
||||
color: #006505;
|
||||
|
||||
font-weight: 700;
|
||||
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
width: 50%;
|
||||
margin: 0 25%;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
|
||||
width: 100%;
|
||||
padding: 200px 25%;
|
||||
box-sizing: border-box;
|
||||
|
||||
color: #bfffc0;
|
||||
background-color: #00a0d2;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
width: 50%;
|
||||
height: 100px;
|
||||
|
||||
margin: 0 25%;
|
||||
|
||||
background-color: white;
|
||||
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&.relative {
|
||||
position: relative;
|
||||
height: 700px;
|
||||
width: 100%;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user