2 Javascripte für Navigation nutzen?

Heqtik · 23. Apr. 2014

Hallo,

ich bin zur Zeit dabei ein Responsive Design (mein erstes) für einen Copy Shop zu erstellen. Hierbei nutze ich eine Navigation, die über Media Querys und JavaScript ab einer gewissen Browserbreite in ein Aufklappmenü umswitcht. Diese Navigation greift auf ein jquery 1.10.1 zurück. Soweit funktioniert auch alles und die Leute vom Copy Shop sind glücklich..

Die Version der Seite bis hierhin findet ihr hier: http://ms-ink.de/batek/index.html

Das Problem ist nun folgendes:

Gewünscht ist nun, dass die Navigation (zumindest in der Desktopversion über 800px Browserbreite) beim Scrollen am oberen Browserrand kleben bleibt, quasi beim "Berühren" des oberen Randes "fixed" ist.

Meinen Versuch dazu findet ihr hier: http://ms-ink.de/batek/problem/index.html

Das Problem ist nicht, dass ich die gewünschte Fixed Navigation Funktion nicht hinbekomme, sondern dass, wenn ich versuche diese mit einzubinden, das ebenfalls benötigte jquery 1.6.4, die oben genannte Responsive Navigation ausschießt und diese nicht mehr in das Aufklappmenü wechselt, wenn das Browserfenster unter 800px breit ist. Zumindest habe ich das Gefühl, dass es genau daran liegt.

Ich hoffe Ihr könnt mir folgen und einem Javascript-Neuling hier helfen.

Freu mich auf eure Antworten!

tsseh · 23. Apr. 2014

2 jquery varianten funktioniert nicht bzw. sollte man darauf verzichten.
erst recht, wenn du hier ein Responsive Design entwickelst und dann 2 mal jquery auf geräten mit meist begrenztem downloadvolumen ziehen willst, womöglich noch über umts.
warum benötigst du denn eine uralte jquery version? die solltest du rausschmeißen

Heqtik · 23. Apr. 2014

Leider bleibt das Problem bestehen, wenn ich die ältere jquery version rausschmeiße.
Vielleicht ist das Problem doch nicht, dass die beiden sich ausschießen...

Der Unterschied zwischen den Codes ist der:

Code ohne "fixed Navigation" Funktion:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

</head>

<body>
<div id="container">

<a href="index.html"><img id="logo" src="http://forum.jswelt.de/images/logo2.jpg" border="0" /></a>
<div class="clear"></div>

<header>
    
	<ul class="slimmenu">
    <li>
        <a href="#">Startseite</a>
    </li>
    <li><a href="#">Druckvorstufe</a></li>
    <li>
        <a href="#">Werbedruck   </a>
        <ul>
            <li><a href="#">Fensterbeschriftung</a></li>
            <li><a href="#">Autofolierung</a></li>
            <li><a href="#">Poster</a></li>
            <li><a href="#">Werbebanner</a></li>
            <li><a href="#">Leinwanddruck</a></li>
            <li><a href="#">Fotodruck</a></li>
            <li><a href="#">Tapetendruck</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Fotokopierzentrum  </a>
        <ul>
        	<li><a href="#">Diplomarbeiten</a></li>
            <li><a href="#">Für Architekten</a></li>
            <li><a href="#">Kostenlose Ausdrucke für Studenten</a></li>
            <li><a href="#">Binden</a></li>
            <li><a href="#">Digitaldruck / Printservice</a></li>
            <li><a href="#">Textildruck</a></li>
            <li><a href="#">Binden</a></li>
            <li><a href="#">Sonstiges</a></li>
            
        </ul>
    </li>
    <li>
        <a href="#">Kontakt</a>
    </li>
</ul>

Code mit der "fixed Navi" Funktion:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>
$(function() {

	// grab the initial top offset of the navigation 
	var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
	
	// our function that decides weather the navigation bar should have "fixed" css position or not.
	var sticky_navigation = function(){
		var scroll_top = $(window).scrollTop(); // our current vertical position from the top
		
		// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
		if (scroll_top > sticky_navigation_offset_top) { 
			$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
		} else {
			$('#sticky_navigation').css({ 'position': 'relative' }); 
		}   
	};
	
	// run our function on load
	sticky_navigation();
	
	// and run it again every time you scroll
	$(window).scroll(function() {
		 sticky_navigation();
	});
	
	// NOT required:
	// for this demo disable all links that point to "#"
	$('a[href="#"]').click(function(event){ 
		event.preventDefault(); 
	});
	
});
</script>

</head>

<body>
<div id="container">

<a href="index.html"><img id="logo" src="http://forum.jswelt.de/images/logo2.jpg" border="0" /></a>
<div class="clear"></div>

<header>

	<div id="sticky_navigation">
    
	<ul class="slimmenu">
    <li>
        <a href="#">Startseite</a>
    </li>
    <li><a href="#">Druckvorstufe</a></li>
    <li>
        <a href="#">Werbedruck   </a>
        <ul>
            <li><a href="#">Fensterbeschriftung</a></li>
            <li><a href="#">Autofolierung</a></li>
            <li><a href="#">Poster</a></li>
            <li><a href="#">Werbebanner</a></li>
            <li><a href="#">Leinwanddruck</a></li>
            <li><a href="#">Fotodruck</a></li>
            <li><a href="#">Tapetendruck</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Fotokopierzentrum  </a>
        <ul>
        	<li><a href="#">Diplomarbeiten</a></li>
            <li><a href="#">Für Architekten</a></li>
            <li><a href="#">Kostenlose Ausdrucke für Studenten</a></li>
            <li><a href="#">Binden</a></li>
            <li><a href="#">Digitaldruck / Printservice</a></li>
            <li><a href="#">Textildruck</a></li>
            <li><a href="#">Binden</a></li>
            <li><a href="#">Sonstiges</a></li>
            
        </ul>
    </li>
    <li>
        <a href="#">Kontakt</a>
    </li>
</ul>
	</div>

Im zweiten Code ist die Navigation in ein zusätzliches div eingefasst, wegen der id. Aber auch wenn ich der Navigation selbst die id=sticky_navigation ändert das nichts

kkapsner · 23. Apr. 2014

Kannst du in dem "Problemlink" oben mal das alte jQuery rausschmeißen, damit wir uns den jetzigen Stand live ansehen können?

Heqtik · 23. Apr. 2014

Hab' es rausgeschmissen!

Heqtik · 23. Apr. 2014

Und ich glaube es funktioniert doch... fast... Oh man

Jetzt muss ich nur noch hinbekommen, dass die "Fixed Navigation" nur über einer Browserbreite von 800px greift.

kkapsner · 23. Apr. 2014

In der sticky_navigation() kannst du doch am Anfang prüfen, wie breit das Browserfenster ist und wenn das schmäler als 800px ist immer den "nicht-fixed" Weg gehen.

PS: wenn es fixiert ist, klebt die Navigation unschön links an der Seite. Das kannst du beheben, indem du in der sticky_navigation() die Zuweisung an "left" komplett entfernst.

Heqtik · 24. Apr. 2014

Super, schonmal Danke... Das mit dem "nicht-fixed" Weg bekomme ich nur nicht ganz hin.. Das muss ich doch quasi mit einem Media Query im JavaScript machen, oder?

Ich habe jetzt

Code:

var mq = window.matchMedia( "(min-width: 800px)" );

in das JavaScript eingefügt... Mir fehlt noch eine if Anweisung, oder? Wie kombiniere ich die mit den anderen if Anweisungen?

Hier nochmal das komplette Script, wieder zu finden unter http://ms-ink.de/batek/problem/

Code:

<script>
$(function() {
	
	var mq = window.matchMedia( "(min-width: 800px)" );
	
	// grab the initial top offset of the navigation 
	var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
	
	// our function that decides weather the navigation bar should have "fixed" css position or not.
	var sticky_navigation = function(){
		var scroll_top = $(window).scrollTop(); // our current vertical position from the top
		
		// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
		if (scroll_top > sticky_navigation_offset_top) { 
			$('#sticky_navigation').css({ 'position': 'fixed', 'top':0 });
		} else {
			$('#sticky_navigation').css({ 'position': 'relative' }); 
		}   
	};
	
	// run our function on load
	sticky_navigation();
	
	// and run it again every time you scroll
	$(window).scroll(function() {
		 sticky_navigation();
	});
	
	// NOT required:
	// for this demo disable all links that point to "#"
	$('a[href="#"]').click(function(event){ 
		event.preventDefault(); 
	});
	
});
</script>

Heqtik · 24. Apr. 2014

Ich bin in Java Script noch kompletter Anfänger.. Weiß jemand wie ich es hinbekomme, dass die Java Script function nur über einer 800px Browserbreite greift?

tsseh · 24. Apr. 2014

Heqtik schrieb:
Ich bin in Java Script noch kompletter Anfänger.. Weiß jemand wie ich es hinbekomme, dass die Java Script function nur über einer 800px Browserbreite greift?

na du musst das noch auswerten, also

var mq = window.matchMedia( "(min-width: 800px)" );

if (!mq.matches) {
...
}

kkapsner · 24. Apr. 2014

Ich würde das ja nicht mit window.matchMedia() machen (scheint mir ein bisschen overkill sein und ist außerdem vom IE9 nicht unterstützt), sondern sondern so (https://api.jquery.com/width/):

Code:

if ($(window).width() >= 800){}){
...
}

2 Javascripte für Navigation nutzen?

Heqtik

New member

tsseh

Lounge-Member

Heqtik

New member

kkapsner

Super Moderator

Heqtik

New member

Heqtik

New member

kkapsner

Super Moderator

Heqtik

New member

Heqtik

New member

tsseh

Lounge-Member

kkapsner

Super Moderator