Colonne droite fixe scroll

Version imprimable

Bonjour,

je souhaiterais rendre un div de ma colonne de droite fixe j'ai réussi via ce bout de code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <script type="text/javascript"> // listen for scroll var positionElementInPage = $('#example').offset().top; $(window).scroll( function() { if ($(window).scrollTop() >= positionElementInPage) { // fixed $('#example').addClass("floatable"); } else { // relative $('#example').removeClass("floatable"); } } ); </script> <style type="text/css"> #example { } #example.floatable { position: fixed; top: 0; bottom:550px; } </style>
le hic c'est qu'il descend trop bas et il rentre dans mon footer si l'on scroll trop bas :(
il y a t'il un moyen de bloquer le div si ce dernier arrive vers 550px du bas de la page ?

merci d'avance
bonne journée ludovic

oui c'est tout à fait possible en utilisant la propriété scrollHeight et en faisant un truc du genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
  // listen for scroll
  var positionElementInPage = $('#example').offset().top;
  $(window).scroll(
   function() {
    if ($(window).scrollTop() >= positionElementInPage && document.body.scrollHeight-$(window).scrollTop()-550>$("#footer").offset().height) {
     // fixed
     $('#example').addClass("floatable");
    } else if ($(window).scrollTop() < positionElementInPage) {
     // relative
 
     $('#example')[0].style.bottom="none";
     $('#example').removeClass("floatable");
 
    } else if (document.body.scrollHeight-$(window).scrollTop()-550<=$("#footer").offset().height) {
         $('#example')[0].style.bottom=550+($("#footer").offset().height-(document.body.scrollHeight-$(window).scrollTop()-550))+"px";
    }
   }
  );
 </script>

13/04/2016, 08h03
lelectronique.com

Bonjour,

merci pour ta réponse je viens d'essayer en modifiant les variables mais cela ne fonctionne pas le div reste au même endroit même pas fixe maintenant j'ai mis ton bout de code dans $(document).ready(function()

entre temps j'ai trouvé https://github.com/bigspotteddog/ScrollToFixed mais pas réussi à m'en servir pourtant la page test.html c'est exactement cela avec le div de l'summary3

A te lire ;)
bonne journée

oui, désolé, j'avais oublié que offset de jquery n'offre pas de propriété height et aussi que scrollHeight sur document.body n'est pas systématiquement égal à l'offsetHeight - le clientHeight.
bref voici mon script corrigé tu peux le copier dans une nouvelle page pour voir son comportement, c'est testé et ça fonctionne:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<html>
<head>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<style type="text/css">
        html, body {
                margin:0;
                padding:0;
                width:100%;
                height:2000px;
                position:relative;
        }
        #footer {
                background-color:#ff9900;
                width:100%;
                height:500px;
                bottom:0%;
                position:absolute;
                z-index:1;
        }
        #example {
                background-color:#000;
                width:50%;
                height:400px;
                left:50%;
                position:relative;
                top:500px;
                z-index:2;
        }
        #example.floatable {
                position:fixed;
                top:0;
        }
</style>
</head>
<body>
	<div id="example"></div>
	<div id="footer"></div>
</body>
<script type="text/javascript">
        // listen for scroll
        var positionElementInPage = $('#example').offset().top;
        $(window).scroll(
                function() {
                        if ($(window).scrollTop() >= positionElementInPage && document.body.offsetHeight-$(window).scrollTop()-$('#example')[0].offsetHeight>$("#footer")[0].offsetHeight) {
                                // fixed
                                $('#example')[0].style.top="0px";
                                $('#example').addClass("floatable");
                        } else if ($(window).scrollTop() < positionElementInPage) {
                                // relative
                                $('#example')[0].style.top="500px";
                                $('#example').removeClass("floatable");
                        } else if (document.body.offsetHeight-$(window).scrollTop()-$('#example')[0].offsetHeight<=$("#footer")[0].offsetHeight) {
                                $('#example')[0].style.top=-($("#footer")[0].offsetHeight-(document.body.offsetHeight-$(window).scrollTop()-$('#example')[0].offsetHeight))+"px";
                        }
                }
        );
 </script>
</html>

13/04/2016, 18h49
lelectronique.com

pas de soucis ;) c'est déjà gentil de me donner un coup de main :)

j'ai réussi à le mettre en place de mon coté mais toujours le soucis avec le footer meme sur ton exemple :( si tu met une hauteur de 600px à #exemple cela ne fonctionne pas

c'est vraiment comme sur cette page https://github.com/bigspotteddog/Scr...ster/test.html ce que je souhaite sauf que je parviens pas à le mettre en place
14/04/2016, 02h00
01001111

selon l'explication que tu m'as donnée, et avec le code que j'ai fait, ça fonctionne même si l'on change la hauteur vers 600px

la page que tu montres en exemple montre un autre principe.
il faudrait savoir ce que tu veux.
14/04/2016, 07h49
lelectronique.com

de mon cote tester sur chrome et FF, le footer prend le dessus sur la colonne de droite (par dessus) hors je serais plus sur un fonctionnement comme l'exemple la colonne qui remettre ou qui laisse un espece entre le footer et la colonne car l'a on ne va pas voir le texte de la colonne qui va être coupe a cause du footer :(
14/04/2016, 14h14
01001111

Alors là je n'y comprends rien,
perso je teste sur firefox et chrome aussi, avec mon code, pas de débordement sur le footer quelque soit la hauteur du div d'id example.

regarde cette page stp et dis-moi ce que tu as:
https://laplumesurlatoile.com/scroll.html
14/04/2016, 14h52
lelectronique.com

je viens de tester ta page même soucis la colonne de gauche elle vient se cacher sous le footer orange si tu vas en bas de page :(
il faudrait que la colonne de gauche remettre afin de ne pas se cacher sous le footer
14/04/2016, 15h34
01001111

Regarde bien l'inspecteur: elle ne se cache pas en dessous. Elle se cale et est éventuellement cachée en haut par contre, si la hauteur disponible est insuffisante.
14/04/2016, 15h58
lelectronique.com

effectivement effet d'optique ;) j'ai réduit le footer pour bien voir et oui autant pour moi
il me reste à trouver pourquoi cela ne fonctionne pas dans ma page...
14/04/2016, 16h31
01001111

ok. Vérifie bien que ton body est en height:auto et position:relative et que les éléments à l'intérieur de celui-ci modifient bien sa hauteur.
14/04/2016, 18h23
lelectronique.com

je n'avais pas cela dans le body mais cela ne change rien je ne comprends pas... je vais laisser tomber tant pis
merci pour ta patience en tout cas
14/04/2016, 21h50
01001111

donne-moi si tu veux un lien vers tout ton code en archive, stp soit ici soit en message privé, je réglerai tes problèmes si je peux, et je t'expliquerai.
15/04/2016, 09h42
lelectronique.com

j'ai réussi hier soir avec l'autre méthode ;)
merci pour ton aide et bon week end à toi