fixed Navi entfernen @screen-width von 479px

[html_wasser]

Guten Tag,

$(document).ready(function() {

    var aboveHeight = $('header').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() > 460){
            $('#navi').addClass('f-nav').css('top','0').next().css('padding-top','50px');
        } else {
            $('#navi').removeClass('f-nav').next().css('padding-top','0');
        }
    });
});

ist es irgendwie möglich, diese fixed navi bei dem breakpoint bei 479px Bildbreite zu entfernen/auszublenden?

 

[Tronjer]

Das sollte sogar per CSS und Media Query gehen.

 

[html_wasser]

Ich habe es schon in meiner Media Query-Datei folgendermaßen versucht, jedoch ohne Erfolg:

@media only screen and (max-width: 479px) {
.f-nav {
    display: none;
}
}

Außerdem verrutscht bei dem 1. breakpoint immer der Inhalt, da der script nur für den full screen angepasst wurde.

 

[Tronjer]

Ich habe es schon in meiner Media Query-Datei folgendermaßen versucht, jedoch ohne Erfolg:

Das wäre aber eigentlich richtig und der Fehler dann im Kontext deiner Seite zu suchen. Alternativ dazu kannst du in das obige jQuery auch so etwas einbauen:

$('.f-nav').hide();

Außerdem verrutscht bei dem 1. breakpoint immer der Inhalt, da der script nur für den full screen angepasst wurde.

Ein hidden Container nimmt nun mal keinen Raum mehr ein.

 

[html_wasser]

Alternativ dazu kannst du in das obige jQuery auch so etwas einbauen:

$('.f-nav').hide();

Vielen Dank!
Wie soll ich das machen? Leider habe nicht sehr große Javascript Kenntnisse...

Mit dem .f-nav {display: none;} erreiche ich zwar, dass die Navi nicht mehr fixiert wird, leider springt jetzt beim scrollen aber genau an der Stelle bei 460px der Inhalt ruckartig weiter (etwa um 50 px)...

 

[Tronjer]

Du könntest anstatt von display:none ein visibility:hidden setzen oder müsstest eben deine Struktur umbauen.

 

[html_wasser]

Du könntest anstatt von display:none ein visibility:hidden setzen oder müsstest eben deine Struktur umbauen.

Der Inhalt verrutscht dann leider immer noch...

Wie könnte ich die Struktur umbauen?

 

[Gelöschtes Mitglied 3007]

Bitte löse dein Problem mit CSS. Für soetwas JavaScript zu nehmen ist total unnötig und dir wurde in diesem Thread schon gezeigt wie du es in CSS einbauen kannst.