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

jQuery Discussion :

fixer un div suivant le scroll


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2007
    Messages
    130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2007
    Messages : 130
    Par défaut fixer un div suivant le scroll
    Bonjour, j'ai un js qui me bloque un div (position fixed) a une certaine hauteur du scroll,
    il fontionne bien sauf que le div se bloque bien mais quand on scroll il rebondi sur le haut de page et se remet bien en place ce qui est
    genant quand on scroll vite, il y a t il un moyen de le fixer sans qu'il bouge car la il fais un peu elastique et rebondi.

    mon js :

    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
     
    <script type="text/javascript">
    $(function() {
     
        var $sidebar   = $("#sidebar"), 
            $window    = $(window),
            offset     = $sidebar.offset(),
            topPadding = 1120;
     
        $window.scroll(function() {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 1110
                });
            }
        });
     
    });
    </script>
    mon css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <style>
    #sidebar{
        position: fixed;
     
        }
    </style>

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Juin 2005
    Messages : 12
    Par défaut
    Hello

    Si tu n'a pas besoin que ton bloc soit animé, tu peux le fixer uniquement en css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <style>
    #sidebar{
        position: fixed;
        top: 1110px;
        }
    </style>

  3. #3
    Membre confirmé
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2007
    Messages
    130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Drôme (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Octobre 2007
    Messages : 130
    Par défaut
    merci pour ta réponse mais ce div est déja avec une margin top

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <style>
    z-index:2;
    position:absolute;
    margin-top:1097px;
    </style>


    edit : bon j'ai trouvé :

    css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #sidebar.fixed{
    position: fixed;
    top:0;
    margin-top:20px;
    }
    #sidebar{
    z-index:5;
    position:absolute;
    top:1180px;
    }
    js :

    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
    <script>
    $(function () {
     
      var msie6 = $.browser == 'msie' && $.browser.version < 7;
     
      if (!msie6) {
        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('margin-top').replace(/auto/, 0));
        $(window).scroll(function (event) {
          // what the y position of the scroll is
          var y = $(this).scrollTop();
     
          // whether that's below the form
          if (y >= top) {
            // if so, ad the fixed class
            $('#sidebar').addClass('fixed');
          } else {
            // otherwise remove it
            $('#sidebar').removeClass('fixed');
          }
        });
      }  
    });
    </script>
    et c'est bon sa fonctionne j'avais zapé le top 0 et la margin top dans la class fixed. merci

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

Discussions similaires

  1. DIV mobile suivant le scroll
    Par DrE44 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 31/07/2007, 15h50
  2. div position du scroll
    Par mapmip dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 08/03/2007, 14h45
  3. [Javascript] déplacement de div suivant souris
    Par LE NEINDRE dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 20/06/2006, 16h45
  4. Fixer des div (fonctionnement comme avec un tableur)
    Par kinder_pingui dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/06/2006, 14h33
  5. [CSS]Aligner les div suivant la résolutation d'écran
    Par nebule dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/09/2005, 11h00

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