fixer un div suivant le scroll

Version imprimable

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:

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:

1
2
3
4
5
6
7
 
<style>
#sidebar{
    position: fixed;
 
    }
</style>

26/06/2012, 09h35
Dabius
Hello

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

1 2 3 4 5 6 7 <style> #sidebar{ position: fixed; top: 1110px; } </style>

merci pour ta réponse mais ce div est déja avec une margin top

Code:

1
2
3
4
5
6
 
<style>
z-index:2;
position:absolute;
margin-top:1097px;
</style>

edit : bon j'ai trouvé :

css :

Code:

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:

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