zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Probleme bei scrollTop() funktion

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.01.2014, 09:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard Probleme bei scrollTop() funktion

Hallo, ich habe 2 Bilder die erscheinen sollen wenn man herunterscrollt.

Nun habe ich das problem das wenn ich das erste mal auf die seite komme die bereits erscheinen. und dann wenn ich bisschen herunterscrolle verschwinden die bis zu dem punkt wie unten im code eingegeben.

Wie kann ich die so machen das sie nur 1 mal laden wenn ich runterscrolle und dannach immer bleiben???
Dazu sollten die nicht gleich am anfang sichtbar sein.

Danke für die hilfe.


Code:
$(document).ready(function(){

                $(document).scroll(function() {

                    var top = $(document).scrollTop();
console.log(top);
                    if (top > 380) $('.screen1').show();
                    if (top < 250) $('.screen1').hide();
                    if (top > 380) $('.screen2').show();
                    if (top < 250) $('.screen2').hide();           
                });
            });
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.01.2014, 10:22
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Und wo ist der Rest vom Code?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.01.2014, 10:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard

html

HTML-Code:
	<div class="left-div-img animated screen1 bounceInLeft">
      <img src="images/Stuermsfs/diagram1.png" width="733" height="550"> </div>
    <div class="right-div-img animated screen2 bounceInRight">
    <img src="images/Stuermsfs/diagram2.png" width="733" height="550"> </div>

CSS

Code:
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}
.animated.hinge{
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}
.animated.flip {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flip;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flip;
	-o-backface-visibility: visible !important;
	-o-animation-name: flip;
	backface-visibility: visible !important;
	animation-name: flip;
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translateX(30px);
	}
	80% {
		-webkit-transform: translateX(-10px);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}
@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}
	60% {
		opacity: 1;
		-moz-transform: translateX(30px);
	}
	80% {
		-moz-transform: translateX(-10px);
	}
	100% {
		-moz-transform: translateX(0);
	}
}
@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}
	60% {
		opacity: 1;
		-o-transform: translateX(30px);
	}
	80% {
		-o-transform: translateX(-10px);
	}
	100% {
		-o-transform: translateX(0);
	}
}
@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}
	60% {
		opacity: 1;
		transform: translateX(30px);
	}
	80% {
		transform: translateX(-10px);
	}
	100% {
		transform: translateX(0);
	}
}
.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	visibility: visible !important;
}

.screen1 {
	position: absolute;
	z-index: 20;
	visibility: hidden;
	opacity: 1 !important;
	margin: 0 auto;
	right: 55%;/*55*/
}
.screen2 {
	position: absolute;
	z-index: 20;
	visibility: hidden;
	opacity: 1 !important;
	left: 55%;/*25*/
}

.left-div-img {
	width: 500px;
}
.right-div-img {
	width: 500px;	
}
.left-div-img img {
	max-width: 100%;
	height: auto;	
}
.right-div-img img{
	max-width: 100%;
	height: auto;	
}
Mit Zitat antworten
  #4 (permalink)  
Alt 10.01.2014, 15:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard

hat sich erledigt, war eigentlich ganz einfach.

einfach nach dem JQuery ready:

$(".screen1").hide();
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[PROTOTYPE] Funktion erst beenden, wenn Ajax Aufruf abgeschlossen ist naitsab Javascript & Ajax 3 09.04.2009 16:41
Code einer bestehenden Funktion hinzufügen cybertron Javascript & Ajax 13 01.01.2009 16:53
mysql Verbindung in Form einer Funktion woofz Serveradministration und serverseitige Scripte 13 17.07.2008 11:58
Funktion gibt Array nicht zurück Schneemann Serveradministration und serverseitige Scripte 8 05.05.2008 02:14
[PHP] Funktion zum Optimieren von CSS Floele Serveradministration und serverseitige Scripte 2 13.08.2005 11:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:23 Uhr.