jQuery scrollTop probleempje

[Coen de Zeeuw]

Goedemorgen medetweakers,

Ik heb in jQuery een stukje code geschreven om een menu tijdens het scrollen (> 100px) fixed te positioneren. Nu is mijn probleem dat wanneer ik weer naar boven scroll, het menu in sommige gevallen niet op de juiste plek terug wordt geplaatst.

Hier de code:

code:

  jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() > 100) {
       jQuery('#main-nav').attr('id', 'fixedmenu');
       jQuery('#register-login-area').attr('id', 'fixregister-login-area');
    } else {
        jQuery('#fixedmenu').attr('id', 'main-nav');
        jQuery('#fixregister-login-area').attr('id', 'register-login-area');
    }
    });

CSS:

code:

#main-nav{
    position:absolute;
    z-index:1000;
    width:100%;
    background:url(../images/menu-bg.png) repeat-x;
    bottom:0;
    left:0;
    height:40px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.5) inset;
}

#fixedmenu{
    position:fixed;
    z-index:9000;
    width:100%;
    background:url(../images/menu-bg.png) repeat-x;
    top:0px;
    left:0;
    height:40px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.5) inset;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.5) inset;
}

HTML:

code:

    <div id="container">
        <div id="top">
            <header id="header">
                <a id="logo" href="#"><img src="resources/images/logo.png" alt="Zorgjobbies"></a>
                
            <ul id="select">
          <li class="active"><a href="index.html">Zorgvrager</a></li>
          <li><a href="zorgverlener.html">Zorgverlener</a></li>
      </ul>
                
                <nav id="register-login-area">
          <ul>
            <li class="register">
              <a href="#">Aanmelden</a>
              <ul class="sub-menu">
                <li><a href="#">Zorgvrager</a></li>
                <li><a href="#">Zorgverlener</a></li>
              </ul>
            </li>
            <li class="login">
            <a href="#">Inloggen</a>
            <ul class="sub-menu">
              <li id="login1"><a href="#">Zorgvrager</a></li>
              <li><a href="#">Zorgverlener</a></li>
            </ul>
            </li>
          </ul>
                </nav>
            </header>
      
    <nav id="main-nav">
        <ul>
          <li class="active"><a href="#">Home</a></li>
                      <li><a href="#">Advertenties</a></li>
                      <li><a href="#">FAQ</a></li>
          <li><a href="#">Over Zorgjobbies</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

      <div id="search">
        <input id="searchfield" type="text" placeholder="Doorzoek website">
        <input id="searchsubmit" type="submit" value="">
      </div>
        
      </nav>
        </div>

Is dit een browser specifiek probleem? In Safari gaat het iig om de tijd niet goed... Alvast bedankt mensen.

[MoietyMe]

top: 0; standaard meegeven, niet alleen als hij fixed is.

Kan je het geheel misschien in een jsFiddle zetten? Ik begrijp niet helemaal wat je nu aan het doen bent.

Overigens kun je veel beter met classes gaan werken in plaats van id's gaan vervangen. Een ID zou eigenlijk een soort van constante moeten zijn.

[ Voor 79% gewijzigd door MoietyMe op 25-11-2013 18:54 ]

[R4gnax]

Coen de Zeeuw schreef op maandag 25 november 2013 @ 11:06:
Is dit een browser specifiek probleem? In Safari gaat het iig om de tijd niet goed... Alvast bedankt mensen.

Webkit heeft al tijden problemen met het correct verversen van content binnen een element met position:fixed. Die familie problemen los je in de regel op door te forceren dat het desbetreffende fixed element een eigen composition layer krijgt. Makkelijkste manier om dat voor elkaar te krijgen is hardware accelerated rendering aan te zetten via -webkit-backface-visibility:hidden.

Verder eens met mijn Good Fella; hiervoor gebruik je classes en niet IDs.

Daarnaast; als je van z-indices gebruik maakt die in de duizendtallen lopen heb je niet begrepen hoe stacking contexts werken. Lees daar eerst eens wat meer over voordat je in je code doorploegt.

[ Voor 9% gewijzigd door R4gnax op 25-11-2013 23:27 ]