Come applicare l'effetto scroll/follow alla sidebar.

[ebello]

Ciao a tutti, oggi vedremo come applicare l'effetto scroll/follow alla sidebar. Il risultato sarà questo: (Quando saremo in cima alla pagina) (Quando scorreremo la pagina verso il basso) Un esempio di sidebar scroll/follow è quella di Sciax2. Iniziamo! Come attivare la sidebar: -Andiamo nell'admincp -Andiamo su Impostazioni>Opzioni> Opzioni Sidebar Forum e Blocchi, e attiviamo la Sidebar -Successivamente andiamo su Forum & Moderatori>Gestione blocchi forum, e qui aggiungiamo tutti i blocchi che vogliamo. Come impostare l'effetto scroll/follow: -Andiamo sempre nell'admincp -Andiamo su Stili & Template>Gestione Stili>Modifica Template, andate su sidebarext_temp e cercate: <ul id="sidebar"> {vb:raw sidebar} </ul> </div> -Aggiungete dopo di questo la seguente stringa: <script src="http://code.jquery.com/jquery-latest.js"></script> <script> var sidebar=$("#sidebar"); var sidebar_position=sidebar.position(); var sidebar_y_origin=sidebar_position.top; var sidebar_margin_top='45'; var sidebar_trigger_y=(sidebar_y_origin-sidebar_margin_top); $(window).scroll(function(){ if($(window).scrollTop()>=sidebar_trigger_y && sidebar.css('position')=='relative'){ sidebar.css('position','fixed').css('bottom',(sidebar_margin_top)+'px'); } if($(window).scrollTop()<sidebar_trigger_y && sidebar.css('position')!='relative'){ sidebar.css('position','relative').css('bottom','0'); } }); </script> -Andate su additional.css e aggiungete: #sidebar_container > ul { top: 50px; float: right; width: 230px; padding: 17px 0; margin-bottom: 3em;} Fine