ScrollToFixed Umsetzung - Menü oben nach scrollen fixieren

HanZ · 28 Nov. 2016

Hallo,

ich versuche das hier umzusetzen:
https://bigspotteddog.github.io/ScrollToFixed/
https://github.com/bigspotteddog/ScrollToFixed

Quasi soll das Menü wie der header agieren im ersten Link, da über dem Menü noch ein Bild ist.
Jedoch bin ich mit Javascript nicht so bewandt und weiß auch nicht, welche Datei von github ich genau brauche.

Das Element das stehenbleiben soll ist #top.

[src=html4strict] <body>
<div id="container">

<div id="header">
<h1>TEXT</h1>
<h2>TEXT</h2>

<div id="top">
<div id="buttons">
<a href="" class="fb" target="_blank"></a>
<a href="" class="yt" target="_blank"></a>
<a href="" class="sc" target="_blank"></a>
<a href="" class="bc" target="_blank"></a>
</div>
<jdoc:include type="modules" name="top" style="xhtml" />
</div>[/src]

CSS

[src=css]#header {
width:1000px;
background:#080808;
padding:0 0 30px 0;
box-shadow:0 20px 30px #080808 ;
}[/src]

Dankeschön!

theSplit · 28 Nov. 2016

Was du defintiv von Github brauchst:
"jquery-scrolltofixed-min.js" oder "jquery-scrolltofixed.js".

Und natürlich eine aktuelle JQuery Version.

JQuery bindest du mit:
[src=html4strict]<script type="text/javascript" src="myjsfolder/jquery.js"></script>[/src]
ein.

Danach bindest du:
[src=html4strict]<script type="text/javascript" src="myjsfolder/jquery-scrolltofixed-min.js"></script>[/src]
ein.

Jetzt kannst du wie hier vorgehen:
[src=javascript]$(document).ready(function() {
$('#top').scrollToFixed({ marginTop: 30 });
});[/src]
So in der Art, mit den Optionen wie "Limit" und Co. mußt du einfach mal herumspielen. Auf Github stehen dazu auch Erklärungen.

Das "$(document)..." kommt dann zum Beispiel in eine drittes ".js" Skript das du ebenfalls mit dem Script-Tag einbindest, nach den anderen beiden.
Üblicherweise werden die Skript-Tags am unteren Ende des "body"-Tags eingebunden, nachdem die Seite vollständig geladen ist.

HanZ · 28 Nov. 2016

Hey,

danke schonmal für die Antwort. Habe jetzt

[src=html4strict]<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
[/src]
in der index.php

Aber wo packe ich

[src=javascript]$(document).ready(function() {
$('#top').scrollToFixed({ marginTop: 30 });
});[/src]

hin? Auch in die index.php?

War zu doof, hab den Pfad falsch angegeben. Musste nichtmal

[src=javascript]$(document).ready(function() {
$('#top').scrollToFixed({ marginTop: 30 });
});
[/src]
hinzufügen, hat sogar einfach so funktioniert. It's a kind of magic.

theSplit · 28 Nov. 2016

Freut mich wenn es funktioniert - aber den...

$('#top').scrollToFixed({ marginTop: 30 });

...Teil mußt du vermutlich so oder so einbauen, sonst weiß das ScrollToFixed-Skript ja nicht, mit welchem Inhalt es arbeiten soll.

Gerade liest es sich so als ob es das automatisch tut.

Das würde ich zum Beispiel in ein drittes .js File/Skript legen das du nach scrolltofixed.js hinzufügst und laden lässt.

Da kannst du dann auch alles andere Javascript theoretisch mit einfügen, oder du machst eines für die Basic Sachen (wie den/das Header/menü und ein viertes(!) für die Sachen die von Seite zu Seite individuell sind. Wäre mein Vorschlag. Falls du mehr Javascript für ein andere Seite hast. ODER du haust all dein JS in ein großes Javascript Datei rein.

Ich würde aber grundsätzlich nicht PHP + HTML + Javascript in einer Datei mischen, das macht man einfach nicht, daher das Laden aus mehreren Dateien für jede Sprache/Skripte/CSS.

ScrollToFixed Umsetzung - Menü oben nach scrollen fixieren

HanZ

Bekannter NGBler

theSplit

1998

HanZ

Bekannter NGBler

theSplit

1998