Witam.
Na początku zaznaczam, że nie chodzi mi o sam fixed. Chcę uzyskać taki efekt jak na stronie głównej dobrych programów. Mam znacznik nav odsunięty 100px od góry i teraz chcę żeby menu “przykleiło” się do krawędzi wyszukiwarki, ale dopiero jak zjedzie się te 100px w dół (podczas przesuwania przez te 100px nav ma zostać na miejscu). Jak to zrobić? Szukałem w google, ale wszędzie było same fixed.
http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/
lub affix efekt od bootstrap:
http://joomlamastery.com/14-menu-or-div-snap-on-top-effect-the-power-of-bootstrap-s-affix
<div id="nav-container">
<nav>
<ul class="nav">
<li class="active"><a href="index.html">Strona główna</a></li>
<li><a href="">Regulamin</a></li>
<li><a href="">Zespoły</a></li>
<li><a href="">Bibliografia</a></li>
<li><a href="">Wskazówki</a></li>
<li><a href="">Kontakt</a></li>
<li class="last"><a href="">Logowanie<span class="sf-sub-indicator"><!-- <img src="black_file.gif"alt=""> --></span></a>
<ul style="background:#EFDFBB; width: 112px" >
<li><form method="post" class="login">
<input type="text" name="login" placeholder="login">
<input type="password" name="haslowpisane" placeholder="hasło">
<input type="submit" id="log" value="Zaloguj">
</form></li>
</ul></li>
</ul>
</nav>
<div class="clear"></div>
</div>
To jest kod mojego menu w html.
.login {
left: 50px;
}
input {
width: 100px;
}
#log { /*przycisk logowania*/
width: 60px;
position: relative;
left: 0px;
}
/* .clear{clear:both}
br.clear{clear:both;margin-top:-15px}
div.main-container{display:block;text-align:left;margin:0 0 1px;}*/
div.main-container h1,div.main-container h2,div.main-container h3,div.main-container h4,div.main-container h5,div.main-container h6{font-family:Artifika, Arial, Helvetica, sans-serif;font-weight:400;line-height:normal;margin:0 0 15px;padding:0}
.nav li:hover{visibility:inherit}
.nav li {position:relative;display:inline-block;zoom:1;*display:inline;}
.nav a{display:block;position:relative;color:#333!important;text-decoration:none;padding:.75em 1em}
.nav li:hover ul,.nav li.sfHover ul{left:0;top:2.5em;z-index:99}
.nav a,.nav a:visited,.nav li.active li a{color:#333}
.nav a.sf-with-ul{padding-right:2.25em}
.nav li ul a.sf-with-ul{padding-right:1em}
.nav,.nav *{list-style:none;margin:0;padding:0}
.nav ul{position:absolute;top:-999em;width:10em}
.nav ul li{width:100%}
.nav li.active li a{color:#333}
.nav li.active a,.nav li:hover,.nav li.sfHover,.nav a:focus,.nav a:hover,.nav a:active{background:#EFDFBB} /*#e0e0e0-szary kolor przy najechaniu myszka */
.sf-sub-indicator{position:absolute;display:block;right:.25em;top:1.05em;width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url("nav_arrows.png") no-repeat -10px -100px}a > .sf-sub-indicator{top:.8em;background-position:0 -100px}a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator,a:active > .sf-sub-indicator,li:hover > a > .sf-sub-indicator,li.sfHover > a > .sf-sub-indicator{background-position:-10px -100px}.nav ul a > .sf-sub-indicator{background-position:0 0}
nav
{
border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0;
}
div.main-container {
position:relative;
top: 15px; /*pozycja menu w pionie*/
}
#nav-container
{
position:relative;display:block;width:960px;margin:0 auto;
}
#nav-container
{
z-index:1000;
font-size:14px;
text-align:center;
text-transform:uppercase;
border-top:1px dashed #666;
border-bottom:1px dashed #666;
}
A tu w CSS (wybaczcie kawałek pisany ciągiem, ale kopiowałem to z jakiegoś szablonu, gdzie ktoś dla uprzykrzenia życia pisał wszystko ciągiem). Z tego poradnika co podałeś wkleiłem JS w head i kod CSS do mojego. Niestety nie zadziałało.
Próbowałe i nie działa, ale pewnie robie coś źle, bo oprócz HTML i CSS reszta to dla mnie czarna magia.
Szczerze to html i css też dla ciebie jeszcze zbyt jasne nie jest.
Po pierwsze powinieneś uporządkować to co już masz. Straszny bałagan tu widzę. Jak znam życie to 2/3 kodu tutaj wrzuconego jest zbędne.
A teraz do meritum jeśli próbowałeś porady z pierwszego linka i
prawidłowo podpiąłeś bibliotekę js i wpąłeś skrypt (możesz skopiować z kodu strony demo,
dodałeś klasę f-nav odpowiedzialną za przypięcie menu po obniżeniu scrolla o 136 pixeli (wartość z przykładu)
i ci nie działa to winna leży w “sile” reguł css’a. Sprawdzając w inspect tool’u możesz zauważyć że style z klasy f-nav są nadpisane przez style dla id nav-container.
Dzieje się to dlatego, że style dla id są silniejsze niż dla klasy. Więcej info: http://mynthon.net/howto/webdev/css-sila-selektorow.html
Mam nadzieję że dobrze trafiam i pomogę tym wpisem.
Dzięki. Udało się.
P.S. Wiem, że nie umiem dobrze CSS i HTML, a nawalenie kodu w CSS jest, ponieważ robię tą stronę z kolegą i każdy z nas dopisuje swoje.