Visualizzazione risultati 1 fino 11 di 11

Discussione: Colonna laterale che sale fino sopra e poi si ferma

  1. #1
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    124

    Predefinito Colonna laterale che sale fino sopra ma non si ferma

    In pratica ho il contenitore e una colonna laterale, devo fare in modo che quando faccio salire la pagine sale anche la colonna, ma quando arriva sopra, la colonna di deve fermare.

    Ho questo codice nella sidebar che non riesco a farlo funzionare:

    Codice HTML:
    <style>
      #container {
        position: absolute;
        right: 0;
        overflow: auto;
        z-index: -40;
      }
    
      #foo {
        height:auto;
        display: block;
      }
    </style>
      
    <script>
         document.getElementById('container').onscroll = function() {
            console.log("scrolling");
          };
    </script>  
      
          <div id="container">
          <div id="foo">
    
    COLONNA LATERALE SIDEBAR
    
    </div></div>
    Ultima modifica di albenessereblog : 27-11-2017 alle ore 09.51.53

  2. #2
    L'avatar di alemoppo
    alemoppo è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    7,877

    Predefinito

    Sinceramente non ho capito molto di quel che vuoi fare. Però qualche commento al codice:


    Il codice viene interpretato "dall'alto verso il basso", quindi quando esegui
    Codice:
    document.getElementById('container')
    , il div container ancora non esiste e il browser risponderà con un errore. Per evitare questa cosa, puoi far in modo di eseguire il codice una volta caricata tutta la pagina (e quindi esisteranno tutti gli elementi su cui potrai lavorare):

    Codice:
    window.onload = function()
    {
         document.getElementById('container').onscroll = function() {
            console.log("scrolling");
          };
    }
    Un'altra cosa che non mi è chiara, applichi il listener al div #container, ma non si può scrollare a meno che tu non metta la proprietà css:
    Codice:
    overflow: scroll;
    .
    Se intendi che il listener deve intercettare lo scroll della pagina, devi impostarlo ad esempio su window, e non sul div.

    Se vuoi che il contenitore rimanga in una certa parte dello schermo anche scrollando la pagina, tieni in considerazione la proprietà
    CSS
    Codice:
    position: fixed;
    Ciao!
    Ultima modifica di alemoppo : 27-11-2017 alle ore 16.10.21

  3. #3
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    124

    Predefinito

    Non capito bene, è un codice che ho trovato in rete. In pratica voglio rendere la colonna scroll come quella sinistra di facebook che sale con la pagina, poi quando rimane la parte finale visibile, la colonna si ferma.

  4. #4
    L'avatar di alemoppo
    alemoppo è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    7,877

    Predefinito

    Quindi come questo.

    L'evento da rilevare, come ti dicevo è lo scorrimento della finestra e non del div. Quindi devi aggiungere il listener a window e non al div.

    Se non vuoi usare jquery, puoi comunque facilmente rilevare lo scroll della pagina come indicato in questo esempio: se lo scroll è tale da nascondere il div, allora lo setti fixed in alto alla pagina, altrimenti lasci tutto normale.

    Ciao!

  5. #5
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    124

    Predefinito

    Ho trovato questo codice, l'ho fatto funzionare in un qualche modo in modo strampalato, non riesco a collocare i css. e poi ovviamente ho i 2 file, uno per la sidebar e l'altro del contenitore centrale.

    Codice HTML:
    <style>
    #contenitore {
    	width: 900px;
    	margin: auto;
    }
    
    #corpo {
    	width: 600px;
    	margin: 10px;
    	float: left;
    }
    
    #menu {
    	margin: 10px;
    	float: right;
    }
    
    
    .fissa {
    	position: fixed;
    	top: 0px;
    }
    </style>
    
    <script>
    jQuery(document).ready(function($) {
        var menu = $("#menu");
        var posizione = menu.position(); // intercettiamo qui l'evento "scroll"                  
        $(window).scroll(function() { // "$(window).scrollTop()" ci dice di quanto abbiamo scrollato la pagina   
            if ($(window).scrollTop() >= posizione.top) { // abbiamo scrollato oltre il div, dobbiamo bloccarlo
                menu.addClass("fissa"); 
            } else { // abbiamo scrollato verso l'alto, sopra il div, possiamo sbloccarlo
                menu.removeClass("fissa");
            }
        });
    });
    </script>
    
    <div id="contenitore"></div>
    <div id="corpo"></div>
    <div id="menu"></div>

    Però nel mio sito ho trovato i 2 css chiave:

    Questo per la colonna

    .site:before {
    border: 1px solid red;
    }


    e questo per il contenitore centrale

    #content {
    border: 5px solid green;
    }
    Ultima modifica di albenessereblog : 28-11-2017 alle ore 10.18.43

  6. #6
    L'avatar di alemoppo
    alemoppo è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    7,877

    Predefinito

    Quei due css definiscono il bordo. In che modo sono chiave? Cosa vorresti modificare?

    Ciao!

  7. #7
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    124

    Predefinito

    Ho messo il bordo per evidenziare le colonne, ma poi lo tolgo, Non so cosa sono le chiavi.
    Questo è il codice che ho adesso e che non funziona.

    Codice HTML:
    <style>
    /* Colonna laterale sx */
    .site:before {
    	border: 0px solid red;
    }
    
    /* Contenitore centrale */
    #content { 
    	border: 0px solid green; 
    }
    </style>
    
    <script>
    jQuery(document).ready(function($) {
        var menu = $("#content");
        var posizione = menu.position(); // intercettiamo qui l'evento "scroll"                  
        $(window).scroll(function() { // "$(window).scrollTop()" ci dice di quanto abbiamo scrollato la pagina   
            if ($(window).scrollTop() >= posizione.top) { // abbiamo scrollato oltre il div, dobbiamo bloccarlo
                menu.addClass(".site:before"); 
            } else { // abbiamo scrollato verso l'alto, sopra il div, possiamo sbloccarlo
                menu.removeClass(".site:before");
            }
        });
    });
    </script>
    Ultima modifica di albenessereblog : 28-11-2017 alle ore 22.48.15

  8. #8
    L'avatar di alemoppo
    alemoppo è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    7,877

    Predefinito

    Citazione Originalmente inviato da albenessereblog Visualizza messaggio
    Ho messo il bordo per evidenziare le colonne, ma poi lo tolgo, Non so cosa sono le chiavi.
    intendevo:
    Citazione Originalmente inviato da albenessereblog Visualizza messaggio
    Però nel mio sito ho trovato i 2 css chiave:
    In che senso css chiave?

    Comunque il tuo codice precedente funzionava. Se vuoi che rimanga fisso a destra devi aggiungere la proprietà right:0px; (o comunque del valore che ti piace di più) a .fissa.

    Ciao!
    Ultima modifica di alemoppo : 28-11-2017 alle ore 23.49.03

  9. #9
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    124

    Predefinito

    Per css chiave intendo che sono i css originali che delimitano le colonne, quindi non c'è bisogno di creare nuovi css, o no?
    Il problema è riuscire a far scrollare la colonna.

    Ho messo così, il contenitore centrale rimane fisso, non scorre, sale solo la colonna.

    Codice HTML:
    /* Contenitore centrale */
    #content { 
        position: fixed; 
        right: 0; 
        display: scroll;
    }
    Mi hai fatto venire un dubbio, che codice devo usare?

    Questo:

    Codice HTML:
    <script>
    window.onload = function() {
         document.getElementById('content').onscroll = function() {
            console.log("scrolling");
          };
    }
    </script>
    o questo?

    Codice HTML:
    jQuery(document).ready(function($) {
        var menu = $("#content");
        var posizione = menu.position(); // intercettiamo qui l'evento "scroll"                  
        $(window).scroll(function() { // "$(window).scrollTop()" ci dice di quanto abbiamo scrollato la pagina   
            if ($(window).scrollTop() >= posizione.top) { // abbiamo scrollato oltre il div, dobbiamo bloccarlo
                menu.addClass(".site:before"); 
            } else { // abbiamo scrollato verso l'alto, sopra il div, possiamo sbloccarlo
                menu.removeClass(".site:before");
            }
        });
    });
    Ultima modifica di albenessereblog : 29-11-2017 alle ore 01.46.23

  10. #10
    L'avatar di alemoppo
    alemoppo è connesso ora Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    7,877

    Predefinito

    Questo:
    Codice:
    <style>
    #contenitore {
    	width: 900px;
    	margin: auto;
    }
    
    #corpo {
    	width: 600px;
    	margin: 10px;
    	float: left;
    }
    
    #menu {
    	margin: 10px;
    	float: right;
    }
    
    
    .fissa {
    	position: fixed;
    	top: 0px;
    }
    </style>
    
    <script>
    jQuery(document).ready(function($) {
        var menu = $("#menu");
        var posizione = menu.position(); // intercettiamo qui l'evento "scroll"                  
        $(window).scroll(function() { // "$(window).scrollTop()" ci dice di quanto abbiamo scrollato la pagina   
            if ($(window).scrollTop() >= posizione.top) { // abbiamo scrollato oltre il div, dobbiamo bloccarlo
                menu.addClass("fissa"); 
            } else { // abbiamo scrollato verso l'alto, sopra il div, possiamo sbloccarlo
                menu.removeClass("fissa");
            }
        });
    });
    </script>
    
    <div id="contenitore"></div>
    <div id="corpo"></div>
    <div id="menu"></div>
    Mi sembra funzionante. Che problemi da?
    Se vuoi aggiungere il css originale, puoi modificare questi aggiungendo le proprietà. Vedi qui.

    Ciao!

    Ciao!
    Ultima modifica di alemoppo : 29-11-2017 alle ore 14.37.44

  11. #11
    albenessereblog non è connesso Utente AlterBlog
    Data registrazione
    04-10-2016
    Messaggi
    124

    Predefinito

    Sono a buon punto, la colonna laterale sale con il contenitore centrale, ma la colonna si ferma al top, invece deve salire fino ad un punto che stabilisco io.

    Codice HTML:
    /* Colonna laterale-sidebar sx */
    .sidebar {  
        float: left;
        width: auto;
        border: 1px solid orange;
    }
    
    /* intercetta dinamicamente la sidebar  */
    .fixed {  
    	position: fixed; 
    	top: 0; 
    }
    ...
    <script>
    jQuery(function($) {
        var sidebar = $('.sidebar');
        var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top'));
        $(window).scroll(function(event) {
            var y = $(this).scrollTop();
            if (y >= top) {
                sidebar.addClass('fixed');
            } else {
                sidebar.removeClass('fixed');
            }
        });
    });
    </script>
    Ultima modifica di albenessereblog : 30-11-2017 alle ore 07.02.35

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •