Colonna laterale che sale fino sopra e poi 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>

---

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!

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.

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!

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;
}

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

Ciao!

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>

---

Citazione:

---

Originalmente inviato da albenessereblog

Ho messo il bordo per evidenziare le colonne, ma poi lo tolgo, Non so cosa sono le chiavi.

---

intendevo:

Citazione:

---

Originalmente inviato da albenessereblog

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!

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");
        }
    });
});

---

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!

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>

---