Navbar fix cu affix

Limbaje de Programare HTML & CSS
1

http://jsfiddle.net/skelly/df8tb/

Incerc sa fac divul de navigatie fix la scroll. Imi ramane divul in pozitie dar nu-mi pastreaza propietatile clasei “container”, adica imi muta continutul la margine.
Se poate face sa-mi ramana meniul in pozitie cu affix?

structura mea este un div jumbotron care are doua divuri container in el. in unul din containere este navigatia pe care vreau s-o fac fixa.
Le:
Am incercat si cu js -> http://jsfiddle.net/#&togetherjs=DbTl4AcHot
De fapt am incercat toate metodele, cred ca am vreo 5 ore de cand incerc sa fac :smiley:

2

În loc de:

#nav.affix {
  position: fixed;
  top: 0;
  width: 100%;

Încearcă să folosești:

#nav.affix {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
3

fara width: 100%; am reusit si eu dar am psdul cu 100% width

4

Păi stai puțin, până intră affix în acțiune elementul trebuie să aibă un width fix apoi 100%?

5

https://jsfiddle.net/vlrstea/z4hewok6/
Asta este cum am inainte de affix. Nu este fix.

LE: Am modificat linkul, nu era ca acolo…

6

Păi și nu așa ar trebui să fie? https://jsfiddle.net/z4hewok6/1/

7

Nu :smiley:
Pana intra affix eu am background transparent la meniu, dupa ce intra affix trebuie sa fie cu fundal alb width:100% dar textul(logoul si meniul) sa ramana in aceeasi pozitie.

8

Cred că nu ne înțelegem :smile:

https://jsfiddle.net/z4hewok6/9/

Așa?

1 Like
9

Este perfect asa. Multumesc de ajutor.

LE: Credeam ca stiu CSS dar se pare ca habar n-am, inteleg selectorii respectivi dar habar n-am ce ai facut acolo. In plus am incercat sa modific culoarea textului pentru clasa affix dar nu-mi modifica nimic. In chrome la “inspect elements” in dreapta la styles imi arata propietatea desi in realitatea culoarea textului este neschimbata.
Chiar nu am pretentia sa-mi spui / dai mura-n gura, spune-mi doar ce sa citesc si voi fi mai mult decat recunascator si pentru asta … :smile:

10

Ok, să le luăm pe rând:

  1. În primul rând, tot navbar ăla trebuie să stea într-un div care va fi affix. De ce așa și nu affix direct pe navbar? Păi nu poți avea width:100% pe navbar;
  • Affix va trebui să stea într-un alt element (affix-container) pentru că odată trecut de punctul de scroll (punctul în care devine fix) va „ieși” din flow-ul documentului, astfel încât tot conținutul ce urmează va sări vreo 70px brusc în sus;
  • Apoi scoatem marginea de la meniul din navbar și o punem pe affix-container. Tot acestui element îi atribuim și o înălțime egală cu cea a .navbar (dacă vei avea conținut dinamic îți recomand să redimensionezi și affix-container corespunzător), astfel încât chiar dacă în interiorul lui vor fi elemente cărora li se va schimba poziția (din static/relative în fixed) nu vor fi afectate elementele ce vor urma.

Asta la mark-up. În CSS facem altele:

  1. pentru affix-container stabilim width, height, margini (așa cum am menționat mai sus)
  • Singurul copil pentru affix-container va fi… affix. Aici ai putea folosi ori child selector (foo > bar), ori ai putea folosi un attribute slector: .affix-container [data-spy="affix"]. Vei avea nevoie să-i dai width:100% pentru că îl vrei cât toată fereastra browserului când va fi fixed și vei avea nevoie și left/top:0 pentru că altfel va fi mutat razna (în plus, pe android 4.x s-ar putea să nici nu fie vizibil)
  • îi setăm culoarea pentru background doar când capătă clasa affix (adică atunci când devine fix)
  • scoatem marginea de la meniu (am zis mai sus de ce)
  • scoatem și border/background de la meniu (din același motiv).

Destul de clar? :smile:

3 Likes
11

E mai mult decat clar :smile:. Mersi inca o data.
Incercasem si eu mai multe variante, inclusiv sa pun navbar intr-un div affix, dar nu m-a dus capul sa fac si in CSS.

Am rezolvat si cu schimbarea culorii.

.affix-container > .affix a {
color: red !important;
}

1 Like