Discussion :

[asus02]

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>

[Dabius]

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>

[asus02]

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