| 

.NET C# Java Javascript Exception

2
Hallo, ich habe da ein kleines Problem. Ich verwende für ein Webprojekt folgenden Javascript Code:

<script>
var $j = jQuery.noConflict();
$j(window).scroll(function() {
var scroll = $j(window).scrollTop();

if (scroll >= 50) {
$j(".topline").addClass("fixed");
} else {
$j(".topline").removeClass("fixed");
}
});
</script>


Mein Problem ist das ich für die Responsive Ansicht der Webseite einen leicht abgewandelten Code benötige. Und zwar soll die Klasse .fixed gleich hinzugefügt werden anstatt erst nach 50px.

Ich hab auch einen Code gefunden der das macht was ich will, aber ich bin eine JS Noob und bekomme die beiden nicht unter einen Hut. Das wäre der Code:

if ( $(window).width() > 739) {     
//50px code
}
else {
//0px code
}


Kann mir jemand behilflich sein die beiden Scripte zu kombinieren? Danke für eure Hilfe.
16.08.2014
chris1407 1 2
2 Antworten
1
Hier wäre eine Möglichkeit wie man das machen könnte.
var $j = jQuery.noConflict();

// Funktion an Variabel zuweisen um doppelten Code zu vermeiden.
var handleScoll = function() {
var scroll = $j(window).scrollTop();

if ( $j(window).width() > 739) { // Wenn nicht-mobil
if (scroll >= 50) {
$j(".topline").addClass("fixed");
} else {
$j(".topline").removeClass("fixed");
}
} else { // sonst mobil
$j(".topline").addClass("fixed");
}
};

// Scroll-Event behandeln
$j(window).scroll(handleScoll);
// Resize-Event behandeln, damit das Testen einfacher wird
$j(window).resize(handleScoll);


Eine Alternative wäre mit CSS und MediaQueries statt JS.

<div class="topline mobile-fixed"></div>


@media (max-width: 739px) {
.topline.mobile-fixed {
/* alles was mit .fixed zugewiesen wird */
}
}


[Nachtrag]

<script type="text/javascript">
var $j = jQuery.noConflict();
var handleScoll = function() {
var scroll = $j(window).scrollTop();

if (scroll >= 50) {
$j(".topline").addClass("fixed");
} else {
$j(".topline").removeClass("fixed");
}
};
if ($j(window).width() > 739) {
$j(window).scroll(handleScoll);
}
</script>


Mit dem zweiten Ansatz wird die Navigation bei geringer Auflösung via CSS auf .fixed gesetzt, JavaScript wird hier nur für nicht-mobile Auflösungen verwendet. Damit wird der JS-Code etwas übersichtlicher, da nicht überall auf die Auflösung geprüft werden muss sondern nur beim Zuweisen der Event-Handler, dafür wird das CSS umfangreicher. Welcher Ansatz besser geeignet ist hängt vom konkreten Projekt und vom persönlichen Geschmack ab.
[/Nachtrag]
19.08.2014
phg 1,6k 4
0
In meinem Fall kann ich es leider nicht mit CSS lösen, da die nav erst nach 50px scrollen fixed werden soll. Deshalb brauch ich JS. Aber dein Code funktioniert super, thx.
23.08.2014
chris1407 1 2
Sorry, bei der CSS-Alternative war ich etwas Wortfaul. Hab das eben korrigiert ;) Es stimmt schon, ganz ohne JS lässt sich das nicht lösen.
Aber es freut mich, dass ich dir mit dem JS-Code weiterhelfen konnte.
phg 24.08.2014

Stelle deine Javascript-Frage jetzt!