28111 sujets

CSS et mise en forme, CSS3

[Résolu] Effet sticky sur colonne gauche

Bonjour,

En partant de cette mise en page traditionnelle :

<div id="header">Mon site</div>
<div id="content">bla bla bla</div>
<div id="utilitaires">Formulaire de recherche</div>

div#utilitaires {width: 100px; position: absolute; top: 50px}
div#content {margin-left: 120px}


J'aimerais avoir un effet sticky pour div id="utilitaires".
Il me semble impossible de conserver la mise en page sur deux colonnes avec css position: sticky.

Qu'en pensez-vous ?
Modifié par boteha_2 (31 May 2017 - 18:39)
Bonjour,

Moi j'ai utilisé cette fonctionalité pour les métas de mes articles en ajoutant une div au sein de ma colonne (aside). Voir ici : exemple pour une page
Modifié par Olivier C (01 Dec 2018 - 11:55)
Bonjour,

L'effet est super.
En plus responsive.

Je n'ai pas trop fouillé dans ton code source qui est quand même assez complexe.

Fais-tu cela juste avec une les CSS (position: sticky) ou avec un javasscript ?
Juste avec CSS.

Je viens de l'installer sur mon site car je ne connaissais pas la position "sticky" avant de vous lire (je décroche du web depuis quelques temps). Cela m'a intrigué et je suis tombé sur ce topic, toujours lié à ce forum ici présent : A propos de la position sticky.
Modifié par Olivier C (31 May 2017 - 05:52)
Bonjour,

J'ai lu l'article en lien mais cela ne répond pas à mes questions.

Sur ton site tu ne sais pas comment c'est fait ?
Il faudrait décortiquer le code source, je n'ai pas encore eu le temps.

Si possible j'aimerais faire cela en CSS uniquement mais cela me semble impossible car mon div#utilitaires vient en dessous du div#content.
Je pourrais inverser mais c'est un peu dommage car l'intérêt est d'afficher d'abord le contenu utile, cela pour le référencement.
Modifié par boteha_2 (31 May 2017 - 11:23)
boteha_2 a écrit :
Sur ton site tu ne sais pas comment c'est fait ?

Si forcément, j'ai codé l'intégralité du thème...

Voici un exemple isolant le code pour le sticky : Sticky
Bonjour,

Je bute sur ce problème, voilà plus d'infos.

L'objet est d'avoir un effet sticky pour le pseudo-cadre gauche.

div#panier {position: sticky; top: 7.3em}

Ne fonctionne pas du tout,

C'est le problème que je soulève en début de discussion.

div#panier est en dessous de div#recherche et je ne vois pas comment les placer à la même hauteur sans un positionnement absolu.

Du coup je me dis que la seule approche possible est un javascript qui ferait basculer div#panier de position absolute à position fixed.
Mais je connais très mal javascript, j'ai trouvé dans ce forum un morceau de code :

$(window).scroll(function (event) {
    // A chaque fois que l'utilisateur va scroller (descendre la page)
    var y = $(this).scrollTop(); // On récupérer la valeur du scroll vertical

    if (y > 0) {
      $('.top_header').addClass('fixed');
    } else {
      // sinon, on l'enlève
      $('.top_header').removeClass('fixed');
    }
  });


Je comprends l'idée mais je me demande comment l'installer.
Modifié par boteha_2 (15 Aug 2017 - 20:03)
Bonjour,

Peut-être faut-il déplacer ce sujet dans le forum Javascript ?

La solution Javascript est très simple :

<script type="text/javascript">
<!--
window.onscroll = function() {myFunction()};
function myFunction() {
var x = document.documentElement.scrollTop;
if (x > 100) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}
}
//-->
</script>

// Avec un doigt de CSS

div#panier.fixed {position: fixed; top: 10px}

@media screen and (max-width: 768px)
{
div#panier.fixed {position: static}
}
Bonjour,

Voilà un code plus perfectionné :

<script type="text/javascript">
<!--
window.onscroll = function() {myFunction()};
 
function myFunction() {
var x = document.body.scrollTop || document.documentElement.scrollTop;
var h = document.getElementById("panier").offsetHeight;
var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
 
if (x > 100 && h < b) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}
 
}
//-->
</script>


La différence avec le code précédent est que la hauteur du Div à passer en position fixed est prise en compte.
En effet, au cas ou la hauteur est supérieure à celle de la fenêtre, la Div doit être "scrollable" pour que tout son contenu soit accessible.

L'idéal serait que cela devienne "scrollable" tout en restant en haut de page.
Là je ne vois pas comment faire.
Modifié par boteha_2 (15 Aug 2017 - 20:03)
Bonjour,

Je coche résolu.

Mais L'idéal serait que cela devienne "scrollable" tout en restant en haut de page.

Peut-être est-ce possible en flexbox ou grid ?

Ou javascript plus compliqué ?
Sujet clos
Aller à