[gelöst] - Menu soll nach scrollen am oberen Fensterrand stehen bleiben
am 25.04.2016 - 12:53 Uhr in
Hallo, nach den Vorgaben von http://jsfiddle.net/adamb/F4BmP/ - "Dynamic top menu positioning" - wollte ich auf meine Drupalseite ein Menü einbauen, das nach kurzem scrollen am oberen Bildschirmrand stehen bleibt.
Ich habe hierfür in meinem theme einen Unterordner js angelegt, in dem ich die Datei menuscroll.js angelegt habe. Auf diese wird auch in der info-Datei verwiesen:
scripts[] = js/menuscroll.js
In der Datei menuscroll.js ist enthalten:
var num = 20; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.auswahl').addClass('fixed');
} else {
$('.auswahl').removeClass('fixed');
}
});
In deer css-Datei habe ich meinem Menu die Klasse .auswahl zugewiesen, und auch die Klasse .fixed definiert:
.auswahl {
position: absolute;
top: 20px;
}
.fixed {
position:fixed;
top:0;
}
Trotzdem bleibt das Menu nach dem scrollen um 20 Pixel nicht stehen, sondern rollt weiter aus dem oberen Bildschirmrand. Auch das Herumspielen mit anderen Pixelwerten hat mich nicht weiter gebracht. Was könnte hier falsch sein?
Danke, Thomas
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich benutze um diesen Effekt
am 26.04.2016 - 22:09 Uhr
Ich benutze um diesen Effekt zu erzielen jQuery Waypoints:
http://imakewebthings.com/waypoints/guides/jquery-zepto/
wo kann man denn deine seite
am 28.04.2016 - 04:56 Uhr
wo kann man denn deine seite mal sehen? so läßt sich der fehler ja nicht erkennen
Die Seite ist unter
am 28.04.2016 - 19:05 Uhr
Die Seite ist unter www.art-and-piano.de zu sehen.
Ich habe die sehr interessanten Vorschläge aus jQuery Waypoints zwar nicht verwendet, bin der Sache aber weiter nachgegangen und habe eine Lösung gefunden.
In der JavaScript-Datei steht nun folgender Code:
/* Scroll bis Browserrand mit 'absolute' und 'fixed' */
jQuery(document).ready(function() {
var navOffset = jQuery(".mein-menu").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery(".mein-menu").addClass("fixed");
} else {
jQuery(".mein-menu").removeClass("fixed");
}
});
});
Damit klappt das jetzt sehr gut.