kostenloser Webspace werbefrei: lima-city

Element auf Y absolut positionieren und x-achse fixen?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   urb

   urb hat kostenlosen Webspace.

   14:03, 30.3.2013

   Hey Limas,
   heute habe ich mal etwas schwierigeres und zwar möchte auf dieser Seite: http://urb.lima-city.de/hizlipuz/ den Transporter auf der Y-achse absolut positionieren und auf der X-Achse fixieren.
   
   Ich bin gestern über eine Position Variante Sticky gestoßen, die angeblich für -webkit- funktionieren soll, tat aber nicht. Mittlerweile bin ich total ratlos, wie ich das umsetzen könnte. Von mir aus kann's auch so funktionieren, das wenn sich der scroller bewegt das Ding sich mit in die Richtung bewegt.
   
   Es muss nur auf einem Browser funktionieren, schön wäre natürlich alle, aber naja.
   
   Habt ihr vielleicht ein paar gute Tipps?
   
   
   Danke schon mal im vorraus! :D
   
   PS: entschuldigt die lange ladezeit, ich will das demnächst noch optimieren, es soll nur so schon mal zeigen was ich ungefähr meine.
   
   Beitrag zuletzt geändert: 30.3.2013 14:06:51 von urb

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m******e

   17:39, 30.3.2013

   Bei mir zeigt das hier Wirkung ;)

   #transporter {
           background:url(../img/transporter.png);
           url("../img/transporter.png") no-repeat 0 0 transparent;
           background-repeat: no-repeat;
           position:fixed;
           top: 90px;
           left:0px;
           width:372px;
           height:150px;
   }

4. Autor dieses Themas

   urb

   urb hat kostenlosen Webspace.

   23:26, 31.3.2013

   Bei mir leider die falsche...
   Wie gesagt ich will das der Transporter nur auf der X-Achse fixiert ist.
   Also das der auf der Straße fährt und nicht im Bild stehen bleibt, wenn ich scrolle.

5. m******e

   3:09, 1.4.2013

   Das tut er auch bei mir.
   Allerdings hast Du die Seite bereits wieder umgebaut, wie ich sehe?
   Welche Browser nutzt Du eigentlich während der Erstellung Deiner Seiten zum testen?
   Nutzt Du Firebug beim Firefox?
6. Autor dieses Themas

   urb

   urb hat kostenlosen Webspace.

   13:43, 1.4.2013

   Na ja, ich hab halt nur dein snipped reingesetzt und die überflüssige Zeile gelöscht.
   Comodo Dragon, eine Abwandlung von Chrome also Webkit-Engine, aber was bringt mir ein Browser wenn ich die falschen Befehle bzw. Technicken hab?!
   
   Schließlich gibt es ja meines Wissens nach kein "fixed-x" -.-
   
   
   So hab endlich was gefunden und endlich funktioniert das auch :D
   
   CSS:
   

   #transporter {
   	position: absolute; /* wichtig! */
   	left: 15px;
   	bottom: 50px;
   	background: url(../img/transporter.png);
   	background-repeat: no-repeat;
   	width: 372px;
   	height: 150px;
   }

   
   
   Jquery
   

   <script>
   	$(document).ready (function () {
   		var leftOffset = parseInt($("#transporter").css('left'));
   		//Grab the left position left first
   			$(window).scroll(function() {
   				$('#transporter').css({
   					'left' : $(this).scrollLeft() + leftOffset //Use it later
   				});
   			});
   		});
   </script>

   
   
   Beitrag zuletzt geändert: 1.4.2013 13:46:07 von hackyourlife

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?