Difference between revisions of "Template:Freiburg/wiki content start"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | |||
| + | <style> | ||
| + | |||
| + | /* upwards navigation blob */ | ||
| + | |||
| + | #upwards_blob{ | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* min-width is chosen so the blob does just not interfere with the content box */ | ||
| + | /* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */ | ||
| + | @media screen and (min-width: 1144px){ | ||
| + | #upwards_blob{ | ||
| + | transition: transform 0.5s ease; | ||
| + | display: block; | ||
| + | position: fixed; | ||
| + | right: -100px; | ||
| + | bottom: 3%; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </style> | ||
| + | |||
<script> | <script> | ||
| Line 15: | Line 38: | ||
console.log($window.scrollTop()+' pageheight:'+$pageheight); | console.log($window.scrollTop()+' pageheight:'+$pageheight); | ||
| + | // button disappears on top of the page // | ||
if ($window.scrollTop() < 0.05*$pageheight) { | if ($window.scrollTop() < 0.05*$pageheight) { | ||
console.log('lower'); | console.log('lower'); | ||
| Line 20: | Line 44: | ||
} | } | ||
| + | // button appears in the middle // | ||
if ($window.scrollTop() > 0.05*$pageheight) { | if ($window.scrollTop() > 0.05*$pageheight) { | ||
if ($window.scrollTop() <($pageheight-100)) { | if ($window.scrollTop() <($pageheight-100)) { | ||
console.log('middle'); | console.log('middle'); | ||
| − | $blob.css({"transform":"translateX(- | + | $blob.css({"transform":"translateX(-110px)"}); |
} | } | ||
} | } | ||
| + | // if there is no lower background image, the button just moves upwards so it doesnt touch the footer // | ||
if ($window.width() < 1320) { | if ($window.width() < 1320) { | ||
if ($window.scrollTop() > ($pageheight-100)) { | if ($window.scrollTop() > ($pageheight-100)) { | ||
console.log('greater small'); | console.log('greater small'); | ||
| − | $blob.css({"transform":"translate(- | + | $blob.css({"transform":"translate(-110px, -100px)"}); |
} | } | ||
} | } | ||
| + | // if the lower background image is visible, the button moves upwards so it stays just above the image // | ||
else { | else { | ||
if ($window.scrollTop() > ($pageheight-430)) { | if ($window.scrollTop() > ($pageheight-430)) { | ||
console.log('greater wide'); | console.log('greater wide'); | ||
| − | $blob.css({"transform":"translate(- | + | $blob.css({"transform":"translate(-110px, 0)"}); |
if ($window.scrollTop() > $pageheight - 430) { | if ($window.scrollTop() > $pageheight - 430) { | ||
$blob.stop().animate({ | $blob.stop().animate({ | ||
Revision as of 07:35, 7 September 2015
