Navigation am oberen Fenster rand "Bildschirmgrössenspezifisch" fixen.

[the_Stibä]

Ich habe ein kleines Problem was meine Navigation anbelangt.
Wenn ich auf meiner Seite scrolle kommt die Navigation von unten ins bild und SOLLTE zuoberst am Bildrand andocken. ich habe dies mittels der Scrollposition geschafft doch habe dann gemerkt das diese natürlich bei grösseren Bildschirmen nicht die selbe Zahl verlangt und somit dann "springt".

kann man das irgendwie schreiben das dies unabhängig der Bildschirmgrösse immer zuoberst bleibt soblad es ankommt?

// JavaScript Document
$(document).ready(function(){
/*UP bei Bildschirmaufbau ausblenden*/
$("#up").hide();
$("#up").removeClass("show");
/*Nav*/

$('.smoothScroll').bind('click',function(event){


var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top

}, 1000)
event.preventDefault();

});


$(window).scroll(function (event) {

$("#up").show();
/*nav*/
// what the y position of the scroll is
var y = $(this).scrollTop();
console.log( $(this).scrollTop() );
//
if( y >= 776 ){
$("#nav").addClass("fixed");
}else{
$("#nav").removeClass("fixed");
}

/*UP*/
if( y > 485) {

$("#up").addClass("show");
} else {
$("#up").removeClass("show");
}

});

})
/*$('#up').on('load',function(e) {
$(this).hide();
});*/

 

[Space Vampire]

Nur dass ich das richtig verstanden hab:
Wenn man scrollt kommt die Navigation vom unteren Viewportrand aus dem Off an den oberen Bildschirmrand geflogen und soll sich da oben anheften. Ist das so richtig?
Ich habs nicht so mit Javascript aber wenn du am ende von diesem FlyIn-Event einfach die CSS-Eigenschaft position: fixed; zuordnest, sollte das eigentlich genau das sein was du erreichen willst.

 

[Cheffchen]

Hallo,

das mit fixed macht er ja oder versucht das :O)

var y = $(this).scrollTop();
console.log( $(this).scrollTop() );

aber kann sein das hier das this falsch ist, zeige mal am besten ein Link wo man das in aktion sieht.

Cheffchen

 

[Tronjer]

Nö, $(this) ist schon ok., wird ja auf $(window) aufgerufen. Aber das ganze Konzept ist irgendwie seltsam. Wenn die Navi beim Laden der Seite von unten nach oben animieren soll, ist das ein einmaliger Vorgang. Wozu noch das scroll()? Damit die Navigation anschließend im Blickfeld bleibt, reicht doch ein position: fixed.

 

[the_Stibä]

Die Navigation kommt nicht aus dem nichts. Wenn man auf der Seite runterscrollt kommt sie ins bild gescrollt.
Doch oben am Bildschirmrand sollte sie diesen nicht verlassen! Ich habe dies jetzt mittels der scrolllposition an diesem Punkt gemacht - dieser unterscheidet sich aber je nach Bildschirm, und springt somit bei manchen dann zu früh nach oben an den rand oder zu spät wenn sie aus dem bild ist wieder ins bild.
Darum meine frage: kann man das irgendwie Bildschirmunabhängig schreiben?

 

[Space Vampire]

Bis jetzt der Beste Rat

...zeige mal am besten ein Link wo man das in aktion sieht.

Befolge ihn doch einfach mal, dann kann dir besser geholfen werden.

 

[the_Stibä]

Bis jetzt der Beste Rat

Befolge ihn doch einfach mal, dann kann dir besser geholfen werden.

Ich habe die Website nicht online gestellt.

 

[Tronjer]

$(window).scrollTop() zeigt die Entfernung zum oberen Rand; $(window).height() gibt die Höhe des Viewports aus.

Die beiden Werte sollten als Referenz doch ausreichen, um daraus eine Condition zu basteln.

 

[scbawik]

Die Navigation kommt nicht aus dem nichts. Wenn man auf der Seite runterscrollt kommt sie ins bild gescrollt.
Doch oben am Bildschirmrand sollte sie diesen nicht verlassen! Ich habe dies jetzt mittels der scrolllposition an diesem Punkt gemacht - dieser unterscheidet sich aber je nach Bildschirm, und springt somit bei manchen dann zu früh nach oben an den rand oder zu spät wenn sie aus dem bild ist wieder ins bild.
Darum meine frage: kann man das irgendwie Bildschirmunabhängig schreiben?

Schon recht schwer zu verstehen.

Also bisher hast du fixe Zahlen (776, 485) verwendet?
Diese musst du durch Variablen oder eine Berechnung ersetzen.

zB

var limit = $(window).height() - $('#nav').height(); // zuvor 776
if( y >= limit ){
  // ...
}

Wie die Berechnung in deinem Fall aussehen würde, kann ich allerdings auch nur vermuten ohne Beispiel.