littleHtml Freak
Mitglied
Hallo,
ich versuche grade einen Javascript zu schreiben, der den aktuellen Titel eines Artikels fix an die obere Browserkante schreibt. Das funktioniert im Prinzip so: Der Skript vergleicht in einer Schleife die Positionen zweier aufeinander folgender Titel. Ist der erste Titel oben außerhalb des Browserfensters und der andere Titel unterhalb der oberen Browserkante, ist der erste Titel der, der gelesen wird. Das klappt bisher wunderbar.
Jetzt möchte ich, dass sobald sich ein neuer Artikel der oberen Broserkante nähert, der alte Titel langsam durchsichtig wird. Das möchte ich erreichen, indem ich abhängig von der Scrollrichtiung und der Position des nächsten Titels opacity meines aktuellen Titels ändere.Das ändern von opacity geht nicht. Beim hochscrollen funktioniert es bis zu einem wert 0.02. Beim runterscrollen gar nicht.(Funktion moveTitles() unter //fade)
Hier der ganze code, damit ihr es selbst ausprobieren könnt, wenn ihr wollt.
ich versuche grade einen Javascript zu schreiben, der den aktuellen Titel eines Artikels fix an die obere Browserkante schreibt. Das funktioniert im Prinzip so: Der Skript vergleicht in einer Schleife die Positionen zweier aufeinander folgender Titel. Ist der erste Titel oben außerhalb des Browserfensters und der andere Titel unterhalb der oberen Browserkante, ist der erste Titel der, der gelesen wird. Das klappt bisher wunderbar.
Jetzt möchte ich, dass sobald sich ein neuer Artikel der oberen Broserkante nähert, der alte Titel langsam durchsichtig wird. Das möchte ich erreichen, indem ich abhängig von der Scrollrichtiung und der Position des nächsten Titels opacity meines aktuellen Titels ändere.Das ändern von opacity geht nicht. Beim hochscrollen funktioniert es bis zu einem wert 0.02. Beim runterscrollen gar nicht.(Funktion moveTitles() unter //fade)
Hier der ganze code, damit ihr es selbst ausprobieren könnt, wenn ihr wollt.
Code:
var titles=new Array;
var currentTitle;
var scrollReference;
var topBorder=0;
var idOfCurrentTitle=0;
function initMoveTitles(){
currentTitle=document.getElementById("currentTitle");
//get all titles
allTitles=document.getElementsByTagName("h2");
//make all titles Title() objects
for(i=0; i<allTitles.length;i++){
if(allTitles[i].id !== "currentTitle")
titles.push(allTitles[i]);
}
console.log("There are "+titles.length+" titles in this document.");
//position the "currentTitle"
document.getElementById("currentTitle").style.top=topBorder+"px";
//adjust topBorder to BoundingClientRect
topBorder+=20;
//set scrollReference
scrollReference=getDistToTop(titles[0]);
//call moveTitles() function while scolling
window.document.onscroll = moveTitles;
}
function stopDynamicTitles(){
window.document.onscroll = null;
}
function moveTitles(){
//handling all but the last title
for(i=0; i<titles.length-1;i++){
if(getDistToTop(titles[i+1])>0 && getDistToTop(titles[i])<=0)
makeCurrentTitle(titles[i],i);
}
//handling last title
if(getDistToTop(titles[titles.length-1])<=0)
makeCurrentTitle(titles[titles.length-1],titles.length-1);
//fade
if(getDistToTop(titles[idOfCurrentTitle+1])<(document.documentElement.clientHeight/2) && getDistToTop(titles[idOfCurrentTitle])<=0){
direction=getDirection();
if(direction==="up" && currentTitle.style.opacity>0){
currentTitle.style.opacity-=0.02;
console.log("scroling up: "+currentTitle.style.opacity);
}
else if(direction==="down" && currentTitle.style.opacity<1){
currentTitle.style.opacity+=0.02;
console.log("scroling down: "+currentTitle.style.opacity);
}
}
}
function getDistToTop(object){
if(object)
return object.getBoundingClientRect().top-topBorder;
}
function getDirection(){
if(getDistToTop(titles[0])>scrollReference)
direction = "down";
else if(getDistToTop(titles[0])<scrollReference)
direction = "up";
else
direction = "no";
scrollReference=getDistToTop(titles[0]);
return direction;
}
function makeCurrentTitle(title,i){
if(i!=idOfCurrentTitle){
currentTitle.innerHTML=title.innerHTML;
currentTitle.style.opacity="1";
idOfCurrentTitle=i;
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="dynamicTitles.js">
</script>
</head>
<body id="body">
<div>
<h2 id="currentTitle" style="position: fixed; top:0px; opacity: 0;">Platzhalter</h2>
<h2 class="h2">Titel1</h2>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
<h2 class="h2">Titel2</h2>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
<h2 class="h2">Titel3</h2>
Du da<br>Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>Du da<br>Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>Du da<br>Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
Hallo<br>
Du da<br>
</div>
<script type="text/javascript">
initMoveTitles();
</script>
</body>
</html>