IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Colonne droite fixe scroll


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    408
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Mai 2003
    Messages : 408
    Par défaut Colonne droite fixe scroll
    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

  2. #2
    Membre chevronné Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Par défaut
    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>

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    408
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Mai 2003
    Messages : 408
    Par défaut
    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

  4. #4
    Membre chevronné Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Par défaut
    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>

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2003
    Messages
    408
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Indre et Loire (Centre)

    Informations forums :
    Inscription : Mai 2003
    Messages : 408
    Par défaut
    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

  6. #6
    Membre chevronné Avatar de 01001111
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2009
    Messages
    319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2009
    Messages : 319
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS] tableau dans tableau - colonne droite
    Par Choupinou dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 30/08/2006, 13h25
  2. probléme de placement colonne droite css
    Par speedylol dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/07/2006, 09h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo