Colonne droite fixe scroll

**lelectronique.com** · 10/04/2016, 15h55

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**01001111** · 13/04/2016, 00h09

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**lelectronique.com** · 13/04/2016, 08h03

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

**01001111** · 13/04/2016, 17h41

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**lelectronique.com** · 13/04/2016, 18h49

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

**01001111** · 14/04/2016, 02h00

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.

**lelectronique.com** · 14/04/2016, 07h49

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

**01001111** · 14/04/2016, 14h14

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

**lelectronique.com** · 14/04/2016, 14h52

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

**01001111** · 14/04/2016, 15h34

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.

**lelectronique.com** · 14/04/2016, 15h58

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...

**01001111** · 14/04/2016, 16h31

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.

**lelectronique.com** · 14/04/2016, 18h23

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

**01001111** · 14/04/2016, 21h50

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.

**lelectronique.com** · 15/04/2016, 09h42

j'ai réussi hier soir avec l'autre méthode

merci pour ton aide et bon week end à toi

Colonne droite fixe scroll

JavaScript

Discussions similaires

Partager

Partager