+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Fixierter Headerbereich (/thread-33528.html)
Fixierter Headerbereich - KaSo - 21.05.2016
Hallo,
in manchen myBB Foren wo ich unterwegs bin, ist der Header oben in der Leiste fixiert. Ich hoffe, Ihr wisst was ich meine.
Wie kann ich das mit JScript umsetzen?
Mein Forum: http://www.xhilfe-board.de
Gruß
RE: Fixierter Headerbereich - wWs - 21.05.2016
Hey Kaos,
JScript ist da eher nicht so sinnvoll.
Du kannst es einfacher per CSS beheben.
Ich weiß nicht wie weit dein CSS wissen ausgereift ist... du musst aber das element einfach per CSS im entsprechendenThemesbereich feststellen indem du:
AdminCP -> Templates & Style => Themes ->Wähle dein Theme -> global.css = wähle den bereich der fixed sein soll indem fall header
Code:
position: fixed;RE: Fixierter Headerbereich - KaSo - 21.05.2016
Hallo wWs,
mein CSS Kenntnisse ist nicht so berauschend. Wenn Du dieses Forum ansiehst (www.sponsor-board.de), sieht Du auch den Headerbereich. So etwas in der Art war die Suche.
Kann man das auch mit CSS umsetzen?
RE: Fixierter Headerbereich - wWs - 21.05.2016
(21.05.2016, 13:33)KaSo schrieb: Hallo wWs,
mein CSS Kenntnisse ist nicht so berauschend. Wenn Du dieses Forum ansiehst (www.sponsor-board.de), sieht Du auch den Headerbereich. So etwas in der Art war die Suche.
Kann man das auch mit CSS umsetzen?
Ich muss jetzt leider los aber du kannst den header bereich ja ersteinmal so feststellen wie ich es oben beschrieben habe.
RE: Fixierter Headerbereich - Jockl - 21.05.2016
Eigentlich steht im Quelltext der von Dir verlinkten Seite alles drin, was Du brauchst.....
Auch die Entwicklertools Deines Browsers helfen Dir beim Suchen des entsprechenden Bereiches.
RE: Fixierter Headerbereich - KaSo - 21.05.2016
Danke für euere Beiträge.
Jockl, leider kenn ich mich mit den Entwicklertools garnicht aus und will nix falsches machen im Live Forum bei mir. Kannst Du mir evtl. dabei helfen?
RE: Fixierter Headerbereich - Jockl - 21.05.2016
Du solltest Dir als Admin eines Forum schon mal grundlegende Kenntnisse zulegen! Und fürs Ausprobieren richtet man sich einfach mal ein Testforum ein, dann kann im Live_Forum nichts passieren.
RE: Fixierter Headerbereich - MrBrechreiz - 21.05.2016
(21.05.2016, 14:11)Jockl schrieb: Du solltest Dir als Admin eines Forum schon mal grundlegende Kenntnisse zulegen! Und fürs Ausprobieren richtet man sich einfach mal ein Testforum ein, dann kann im Live_Forum nichts passieren.
Davon rede ich schon gut zwei Jahre von, das er es tun soll.
RE: Fixierter Headerbereich - KaSo - 21.05.2016
Hahahaha,..ich komm einfach mal mit dem Entwicklerzeug nicht klar. Und ein Testoberfläche werde ich mir zwangsläufig mal bauen müssen.
Kann mir trotzdem jemand weiterhelfen können? Wäre euch sehr dankbar.
RE: Fixierter Headerbereich - òóGlubscher - 21.05.2016
Vor ein paar Monaten habe ich auf meiner Seite sowas eingebaut und auch ein TuT dazu verfasst.
Das Poste ich doch mal frech 1:1:
Mit dieser kleinen JavaScript/jQuery-Funktion lässt sich der Website-Header (oder ein beliebiges anderes HTML-Element) beim scrollen über eine bestimmte Position dynamisch mit einer .sticky CSS-Klasse versehen und dann per CSS beliebig anpassen.
In unserem Fall ist es die Panel Leiste (Benutzer, Moderator oder Admin-CP). Somit hat man beim scrollen die Leiste am oberen Bildschirmrand im Blick.
Man benötigt dafür ein paar Zeilen JavaScript/jQuery und eine zusätzliche Klasse in der jeweiligen CSS.
füge in der Templates & Style -> Templates -> dein Style -> Templates ohne Gruppe -> headerinclude ganz unten ein:
Code:
<script type="text/javascript">
jQuery(document).ready(function($) {
function sticky() {
var window_top = $(window).scrollTop();
var top_position = $('body').offset().top;
var element_to_stick = $('#panel');
if (window_top > top_position) {
element_to_stick.addClass('sticky');
} else {
element_to_stick.removeClass('sticky');
}
}
$(window).scroll(sticky);
sticky();
});
</script>Nutzt ihr MyBB 1.6 kann es sein das ihr ein jQuery.noConflict(); in den obigen Code einbauen müsst damit sich verschiedene JavaScript Frameworks wie Prototype und jQuery nicht in die Quere kommen. Weitere Informationen zu jQuery.noConflict(); findet ihr hier.
Habt ihr bereits MyBB 1.8 am laufen, benötigt ihr kein jQuery.noConflict(); da MyBB 1.8 bereits jQuery nutzt.
Nun brauchen wir noch die erwähnten Zeilen CSS Code damit das Panel auch immer oben angezeigt wird.
füge in der Templates & Style -> Themes -> dein Style -> global.css ganz unten ein:
Code:
#panel.sticky
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}Habt ihr alles richtig eingebaut, wird euch ab sofort das Panel sobald ihr etwas nach unten scrollt in eurem Forum, immer oben angezeigt.
Ihr könnt die CSS Klasse weiter editieren z.b. mit einem z-index (habe ich hier gemacht da sonst das Youtube Filmchen in der Leiste wäre.)
oder auch font-size, background usw.