Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Slider fixieren
#1
Hallo ihr Lieben,

ich bastle gerade an einer Seite, die unter der Navigation einen großen Slider eingebaut hat. 
Weitere Inhalte der Seite kommen dann unterhalb des Sliders.
Code:
<body>

<nav> ... </nav>

<div id="content">
   <div id="middle">
     <!-- Header Slider -->
       <header>
         <!-- Slider wird hier mittels PHP eingebunden und mit jQuery gesteuert;
              besteht im Wesentlichen aus 3 Fotos, die abwechselnd angezeigt werden. -->
       </header>              

            <!-- Seiteninhalt -->            
       <main>
         <!-- hier folgt der restliche Content der Seite -->
       </main>
</div>


Nun möchte ich die Seite so bauen, dass der Inhalt des <main>-Containers beim Scrollen den Slider überdeckt, d.h. der Slider bzw. der <header> soll oben fixiert werden und der <main> darüberscrollen.
Ich schreibe das CSS nicht direkt, sondern arbeite mit SCSS (was es schwierig macht, den CSS-Code hier abzubilden).

Grundproblem ist:
Wenn ich dem <header> "position: fixed;" gebe, wird der Slider nicht mehr angezeigt.
Wenn ich dem Slider selbst "position: fixed;" gebe, rutscht der restliche Content gleich komplett über den Slider drüber nach oben, der Slider ist aber dennoch nicht fixed, sondern scrollt weiterhin mit.

Hat jemand eine Idee, wie ich den Slider sinnvoll fixieren kann, so dass er nicht mitscrollt?
Gibt es vielleicht eine Möglichkeit, den Slider wie ein Hintergrundbild zu verwenden? Wenn ja, wie macht man das?
Oder hat jemand noch eine andere Idee?
Zitieren
#2
Schwer zu sagen ohne die Seite zu sehen.
Wahrscheinlich ändert ja das JS vom Slider auch was im html-aufbau.
Zeig doch mal die Seite mit dem fixierten header, das wäre ja der Idealfall, wenn der Slider eh im header mit drin ist.
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#3
Photo 
Nein, JS verändert soweit ich das sehen kann eigentlich nichts am HMTL, es beeinflusst nur das CSS.
Die Bilder des Sliders werden mit animate ein- und ausgeblendet.

Ich hab mal 3 Screenshots gemacht - einmal so, wie es aussehen soll (nur dass der Slider halt noch fixiert werden muss), einmal wenn man im CSS den Header fixiert und einmal, wenn man im CSS den Slider selbst fixiert (jeweils mit position: fixed).
Das Komische ist, dass selbst nach der Fixierung der Slider in beiden Fällen nicht stehenbleibt, sonder weiter mitscrollt...


Angehängte Dateien
.pdf   Slider.pdf (Größe: 738,85 KB / Downloads: 2)
.pdf   Header_fixed.pdf (Größe: 262,73 KB / Downloads: 2)
.pdf   Slider_fixed.pdf (Größe: 688,56 KB / Downloads: 2)
Zitieren
#4
Anhand von screenshots kann ich dir nicht helfen.
Isoliere das Problem und mach einen jsfiddle oder ähnliches.
Oder lade deine Website hoch, womöglich mehrere Version mit dem was du versucht hast, damit man sich das Problem live anschauen kann.
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#5
Ok, ich einfach ein bisschen vorsichtig, sorry.
Hier die URL der Seite:

badass.engelstein.de

Es geht jetzt erstmal um die Startseite (die anderen sind noch in Bearbeitung...).
Zitieren
#6
Boxen Modell von self html schon mal hin geschaut ???

So wie ich das nun gesehen habe, möchtest Du den Slider andocken und oder soll das Header  bild unter dem Slider Dahinter
 (nicht sichtbar verschwinden) , so wie bei meiner seite ??? [ http://raum19.de ]  <= keine Eigenwerbung jetzt, gilt nur als Verständlichkeit um zu wissen wie genau du das meinst...

auf meiner seite wird beim scrollen, das Menü ( dein slider : zu einer kleiner DIV Box angedockt ) und das Header bild verschwindet dahinter, der Slider in meinem Fall ist nicht transparent !  [ Dein Slider in meiner Seite = das Menü oben rechts ]
--
R19 Mediengestalter
Freelance : DTP, Screen & Web Design seid 1997

Sage es mir - ich werde es vergessen
     Zeige es mir - ich werde mich daran erinnern
                       Beteilige mich, ich werde es verstehen ...
Zitieren
#7
(13.11.2016, 02:07)mediengestaler19r schrieb: Boxen Modell von self html schon mal hin geschaut ???

So wie ich das nun gesehen habe, möchtest Du den Slider andocken und oder soll das Header  bild unter dem Slider Dahinter
 (nicht sichtbar verschwinden) , so wie bei meiner seite ??? [ http://raum19.de ]  <= keine Eigenwerbung jetzt, gilt nur als Verständlichkeit um zu wissen wie genau du das meinst...

auf meiner seite wird beim scrollen, das Menü ( dein slider : zu einer kleiner DIV Box angedockt ) und das Header bild verschwindet dahinter, der Slider in meinem Fall ist nicht transparent !  [ Dein Slider in meiner Seite = das Menü oben rechts ]


Hallo, vielen Dank für den Tipp - inzwischen hab ich es hinbekommen, es ist jetzt genau so wie ich es wollte. Smile
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste