Affix permette di bloccare un elemento sulla pagina prima che scompaia nello scrolling.
Scrollspy evidenzia automaticamente gli elementi del menù in funzione della posizione della pagina sullo schermo
Entrambi sono attivati tramite l'attributo data-spy
cfr. http://www.w3schools.com/bootstrap/bootstrap_affix.asp
Il codice di questo esempio è adattato da W3School Affix & Scrollspy
Scorrendo la pagina la barra di navigazione rimane incollata in alto senza scomparire.
Come si attiva:
Nell'elemento che si vuole bloccare:
data-spy="affix"data-offset-top|bottom="..."
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
Scorrendo la pagina si vedranno i link della barra di navigazione cambiare stato.
Scrollspy infatti tiene sotto controllo gli id delle sezioni di un elemento e i link di un elemento target verso le sezioni. Tipicamente si assegna al body così da evidenziare nella navbar la posizione della pagina.
Trigger: data-spy="scroll"
Target: data-target="#main-navbar"
<body data-spy="scroll" data-target="#main-navbar">
<nav id="main-navbar" class="navbar... ...
<div id="intro" ...IMPORTANTE! Il contenitore da tenere sotto controllo DEVE avere nel CSS con valore position: relative;.
Quindi in questo caso, siccome è body il contenitore dovremo aggiungere:
body {
position: relative;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut metus magna. Maecenas in sapien sed mi accumsan vehicula. Proin consequat pellentesque ligula eu imperdiet. Integer vel ante at diam porttitor eleifend ac sed mi. Cras id vehicula odio, vitae venenatis est. Donec ex ipsum, commodo eget augue eget, euismod placerat libero. In gravida elementum sem eu volutpat. Aenean mi enim, blandit vitae nulla vitae, eleifend tempus ligula. Duis lorem ligula, ultricies in elit non, sodales ornare massa. Phasellus accumsan odio vel orci interdum egestas. Proin vulputate dui nibh, et molestie turpis malesuada ut. Sed blandit elit at purus convallis scelerisque. Sed dictum sollicitudin nisi nec imperdiet. In at eros venenatis, efficitur eros eget, auctor neque. Vestibulum rutrum, nunc a hendrerit sollicitudin, turpis ex eleifend quam, id laoreet lectus velit eu arcu. Aenean nunc libero, eleifend at elit et, finibus porttitor felis. Nulla facilisi. Cras mattis tortor a nulla sollicitudin scelerisque. Vestibulum laoreet tellus sed mauris mattis mattis. Maecenas ex dui, porta vel consequat in, aliquet vitae lacus. Nunc consectetur ullamcorper pharetra. Fusce sagittis dignissim tortor, eu dignissim ligula semper a. Quisque pellentesque maximus magna, consectetur interdum sem tincidunt vel. Suspendisse potenti. Praesent id est ac lacus tincidunt facilisis. Morbi sodales elementum sem sed aliquet. Pellentesque orci odio, vestibulum rutrum arcu ornare, fringilla auctor erat. Proin sem sem, iaculis a sapien ut, aliquam laoreet risus. Pellentesque a odio scelerisque felis condimentum aliquam. Mauris nec pulvinar mauris. Nulla condimentum arcu nibh, et faucibus libero rhoncus a.
Pellentesque at velit mi. Sed semper maximus laoreet. Curabitur vel blandit est. Pellentesque pellentesque lectus elit, ac vulputate nibh pharetra pellentesque. Aenean hendrerit in dui et vulputate. In nec purus nec mi vulputate tristique. Donec porta, arcu facilisis eleifend convallis, erat risus scelerisque dolor, eu auctor lorem quam eu neque. Nam et tellus sollicitudin, fringilla quam nec, condimentum felis. Ut egestas ut urna id porta.
In quis augue pharetra, ultrices elit eget, tincidunt libero. Nulla eu sem turpis. Praesent eros enim, convallis quis blandit in, suscipit vel odio. Curabitur molestie sollicitudin massa, non egestas elit. Proin sagittis, sapien sed varius vehicula, tellus nulla luctus orci, non sollicitudin est purus non velit. In ultrices urna nec dui volutpat accumsan in nec lacus. Curabitur euismod semper leo et laoreet. Nam a vehicula ex. Mauris in nisi diam. Nunc et pellentesque nibh, ac varius turpis.