153 lines
7.3 KiB
HTML
153 lines
7.3 KiB
HTML
<!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> |