Menu (div) fixed

Das Menu auf einer Webseite soll je nach Position mitscrollen oder fix sein. Oben auf der Seite scrollt das Menu mit, im mittleren Teil bleibt es links oben fix am Rand und unten verschwindet das Menu, damit es nicht in den Footer scrollt. Dieses Verhalten gilt für Desktop und Tablet, nicht für Smartphone.

Dieses Beispiel ist von Internetseite  pizzeria-pronto-bad-waldliesborn.de/speisekarte/

HTML-Code:

<div id=”speisekarte_all”>

<div id=”speisekarte-left-menue” class=””>
   <nav>
   <ul>
      <li> <a href=”#pizza”>Pizza</a> </li>
      <li> <a href=”#nudeln”>Nudelgerichte</a> </li>
      <li> <a href=”#nudelnueberbacken”>Nudeln überbacken</a> </li>
      <li> <a href=”#salate”>Frische Salate</a> </li>
      <li> <a href=”#getraenke”>Alkoholfreie Getränke</a> </li>
      <li> <a href=”#biere”>Bier</a> </li>
      <li> <a href=”#weine”>Wein</a> </li>
      <li> <a href=”#speisepdf”>Speisekarte als PDF</a> </li>
   </ul>
   </nav>
</div><!– speisekarte-left-menue–>

<div id=”speisekarte” class=””>
   <div id=”pizza” class=”anker”>&nbsp;</div>
   <h3 style=”padding-top:0px;”>Pizza</h3>
   <div class=”total links”>
   <div class=”speisetext links inline”>
   <div class=”speisenr inline”>&nbsp;</div>
   <div class=”inline”><strong>&nbsp;</strong>&nbsp;</div>
   </div>
   <div class=”rechts inline”>
   <div class=”speisepreis inline fett”>22 cm</div>
   <div class=”speisepreis inline fett”>28 cm</div>
   <div class=”speisepreis inline fett”>50 cm</div>
   </div>
   <div class=”space clear”></div>
   <div class=”total links”>
   <div class=”speisetext links inline”>
   <div class=”speisenr inline”>1.&nbsp;</div>
   <div class=”inline”><strong>Bella Italia ^E</strong>
   <br>Tomaten, Käse ^3,F, Salami ^2,3, Schinken ^7,8,9 und Pilze
   </div>
   </div>
   </div>
   </div>
…
   <p> <i>Druckfehler, Irrtümer und Änderungen vorbehalten. </i> </p>
   </div>
</div><!– speisekarte –>

CSS-Code:

#speisekarte-left-menue {
width: 220px;
float: left;
margin-right: 10px;
}

.menue_fixed {
position: fixed;
top: 100px;
}

#speisekarte {
float: left;
margin-left: 30px;
width: 100%;
max-width: 700px;
}
@media screen and (min-width: 960px) {
#speisekarte {
max-width: 600px;
}
}

.karte_space {
margin-left: 260px !important;
}

jQuery:

var speisekarte = “#speisekarte”;
var speisekarte_menu = “#speisekarte-left-menue”;
var speisekarte_menu_position_top;

if ( jQuery(speisekarte).length )
     speisekarte_menu_position_top = jQuery(speisekarte_menu).offset().top – 10;

jQuery(window).scroll(function() {
   if ( jQuery(speisekarte).length ){
      if ( jQuery(this).scrollTop() >  6640   ||
          jQuery(window).width() <  960   ||
          jQuery(this).scrollTop() <= speisekarte_menu_position_top  ){
          jQuery(speisekarte).removeClass(‘karte_space’);
          jQuery(speisekarte_menu).removeClass(‘menue_fixed’);
      }
   else {
      jQuery(speisekarte).addClass(‘karte_space’);
      jQuery(speisekarte_menu).addClass(‘menue_fixed’);
   }
}
});