SELFPHP: Version 5.8.2 Befehlsreferenz - Tutorial – Kochbuch – Forum für PHP Einsteiger und professionelle Entwickler

SELFPHP


Professional CronJob-Service

Suche



CronJob-Service    
bei SELFPHP mit ...



 + minütlichen Aufrufen
 + eigenem Crontab Eintrag
 + unbegrenzten CronJobs
 + Statistiken
 + Beispielaufrufen
 + Control-Bereich

Führen Sie mit den CronJobs von SELFPHP zeitgesteuert Programme auf Ihrem Server aus. Weitere Infos



:: Buchempfehlung ::

Webseiten professionell erstellen

Webseiten professionell erstellen zur Buchempfehlung
 

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

Zurück   PHP Forum > SELFPHP > HTML, CSS und JavaScript Help!

HTML, CSS und JavaScript Help! Hier gibt es Hilfe zu HTML, CSS und JavaScript Problemen

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 04.01.2015, 19:05:44
Cleee Cleee ist offline
Anfänger
 
Registriert seit: Jan 2015
Alter: 29
Beiträge: 1
Header bei Scroll einblenden und fixieren. [Verzweifelt]

Hallo liebe Community,
ich habe ein Problem, welches sich allem Anschein nur mit Javascript lösen lässt. Was Javascript angeht bin ich ein blutiger Anfänger und hoffe sehr das ihr mir helfen. Ich habe seit gestern sehr viel Zeit Energie und Nerven daran verloren.

Das Ziel ist es Den Header auf der ersten Seite bzw. dem ersten Scroll auszublenden. Also nach dem ersten Scroll einzublenden und zu fixieren.

Link zur Seite

Problematisch wird es nur sehr wenn das Fullpage.js Plugin in’s Spiel kommt. Dieses liest die Fenstergröße aus und skaliert meine Haupt Container entsprechend. Außerdem steuert es die Seitennavigation also auch den Scroll und gibt mir eine Struktur vor. Aufgrund der Struktur kann ich das Problem nicht mit CSS über den Z-Index lösen. Falls Ihr da aber noch ne Idee habt, immer gerne her damit! :P

Ich habe seit dem einiges mit Javascript oder jQuery versucht wie z.B:
Beim Scrollen oder erreichen von bestimmten Pixel Werten Objekten zusätzliche Klassen zu vergeben. Das hat nicht geklappt weil mein Onepage Plugin (fullpage.js) Die Hauptsection nach der Fenstergröße ausrichtet und nur die Inhalte in dem Container verschiebt.

Ich habe auch versucht nach einem Scroll die Klassen meiner Container zu überprüfen und im Falle einer Übereinstimmung weitere Klassen hinzuzufügen und zu entfernen. (fullpage.js) fügt der aktiven Section die klasse „active“ hinzu. Das ist auch daran gescheitert, dass das Scrollen nicht erkannt wurde.

Ich habe auch diverse Plugins wie sticky.js, headassive .js, appear etc. ausprobiert alle Ohne erfolg.

Download des HTML Grundgerüst
Link zuFullsize Plugin

Ich glaube am einfachsten wäre ein Code wie folgt. Wenn (#section1) hat Klasse = („active“) dann (header) füge Klasse hinzu („block“) und entferne klasse („none“). (Oder direkter Eingriff in das CSS mit display:none; und display:block;)

Nur leider bin ich nicht fähig das so zu coden.

Die Frage ist nur wie man die Anweisung auslöst. Vielleicht funktioniert es wenn man es trotzdem per Scroll auslösen lässt nur diesen Scroll auch auf den HauptContainer bezieht. Vielleicht hat es sich bis jetzt immer auf den Body bezogen. Alternativ könnte ich mir auch ein MouseOut vorstellen welches sich auf die 1. Section bezieht. Da stellt sich die Frage nur wie es für Mobile Nutzer aussieht.

Wenn ihr irgendeine Lösung parat habt wie ich den Header nicht auf jeder Seite(auf jedem Slide) Neuladen muss sondern ihn nur einmal im Dokument angelegt habe und nur auf der ersten Seite nicht anzeigen lasse – egal wie – nur her damit!!!!!

Wäre wirklich überaus dankbar und würde im Gegenzug meine Zeit und Kentnisse in HTML und CSS anbieten. Bin echt am Verzweifeln und habe massig Zeit darein investiert und
hoffe sehr ihr könnt mir helfen!

Vielen Lieben Dank und liebe Grüße!
Clemens
Mit Zitat antworten
  #2  
Alt 06.01.2015, 13:39:45
Ckaos Ckaos ist offline
Member
 
Registriert seit: Nov 2007
Beiträge: 843
AW: Header bei Scroll einblenden und fixieren. [Verzweifelt]

Hi,

ich habe das mit Bootstrap+JQuery so gelöst
Code:
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});
Läuft bei mir ;)

MfG

CKaos
__________________
"Wenn die Leute Häuser so bauen würden, wie wir Programme schreiben, würde der erstbeste Specht unsere Zivilisation zerhacken."
In den allermeisten Fällen sitzt der Bug etwa 40 cm vor dem Monitor!
Mit Zitat antworten
Antwort


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
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 aus.
[IMG] Code ist aus.
HTML-Code ist aus.

Gehe zu


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:48:27 Uhr.


Powered by vBulletin® Version 3.8.3 (Deutsch)
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.


© 2001-2024 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt