Autore Topic: Colonne laterali con loghi scorrevoli  (Letto 3307 volte)

boyot

  • Nuovo arrivato
  • *
  • Post: 41
Colonne laterali con loghi scorrevoli
« il: 04 Aprile, 2016, 14:55:19 »
Ho creato 3 colonne, una a sinistra e una a destra con i loghi degli sponsor, e una centrale col testo.

Vorrei sapere se è possibile e come si fa a fare in modo che i loghi laterali scorrano andando in basso a leggere la pagina.

Il sito è questo: http://www.rivolirugby.it
- OS: Windows 10 x64
- Website X5 Evolution 11
- Website X5 Evolution 13

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Colonne laterali con loghi scorrevoli
« Risposta #1 il: 04 Aprile, 2016, 23:03:37 »
Prova a vedere se questo esempio risponde a quello che stai cercando di ottenere:

http://lemonsong.altervista.org/test_sidebar_scrollTop/

Se sì, imposti per tutti gli oggetti che fungono da "sidebar" un'ancora, esempio: per quelli di sinistra sidebarL e per quelli di destra sidebarR

Al Passo 4 - Statistiche, SEO e Codice - Prima della chiusura del tag HEAD incolli questo script:

Citazione
<script>
$(window).scroll(function() {
    var sidebar = $('#sidebarL +  div div[id^="imCellStyle_"], #sidebarR +  div div[id^="imCellStyle_"]');
    if ($(window).scrollTop() > 200) {
        sidebar.css({
            'position': 'fixed',
            'top': '60px'
        });

    } else {
      sidebar.css({
      'position': 'relative',
      'top': 'auto'
      });
    }
});
</script>


I valori in rosso sono da personalizzare.

Nota: le sidebar sono in position:fixed quindi l'altezza delle stesse non deve essere esagerata perché altrimenti chi naviga con risoluzioni relativamente basse, non vedrà tutto il loro contenuto.

boyot

  • Nuovo arrivato
  • *
  • Post: 41
Re:Colonne laterali con loghi scorrevoli
« Risposta #2 il: 05 Aprile, 2016, 00:00:00 »
Grazie l'esempio è esattamente quello che volevo fare.

Domani mi cimento con lo script e ti faccio sapere
- OS: Windows 10 x64
- Website X5 Evolution 11
- Website X5 Evolution 13

boyot

  • Nuovo arrivato
  • *
  • Post: 41
Re:Colonne laterali con loghi scorrevoli
« Risposta #3 il: 05 Aprile, 2016, 01:15:21 »
Per lo script nessun problema, l'ho messo nel posto giusto

Non ho capito l'ancora dove si imposta, l'unica che ho trovato è la punto 3 in "Creazione della pagina" e l'ho messa sulle 2 barre ai lati ma non succede nulla.
Devo creare una cella per ogni sponsor o posso lascarli tutti in un'unica?
« Ultima modifica: 05 Aprile, 2016, 01:20:17 da boyot »
- OS: Windows 10 x64
- Website X5 Evolution 11
- Website X5 Evolution 13

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1867
    • lemonsong's world
Re:Colonne laterali con loghi scorrevoli
« Risposta #4 il: 05 Aprile, 2016, 09:15:14 »
Come già detto, i nomi delle ancore in ogni pagina devono essere sidebarL per un unico oggetto di sinistra e sidebarR per un unico oggetto di destra.
Se vuoi altri nomi, devi cambiarli anche nello script.

Se hai ancora problemi, aggiorna il sito per capire cosa stai facendo.


Considerazioni:
  • se gli sponsor sono gli stessi in ogni pagina, forse ti conviene/conveniva inserirli con un altro metodo, per esempio nel footer/header con un po' di codici oppure, al limite, utilizzando iframe
  • se passerai alla 12 in modalità responsive, l'esempio dovrà essere rivisto