粘滞div平滑滚动

Question

I want to create a sticky div as smooth as in this example: http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html?src=tp&_r=0

Right now, my example isnt smooth at all, but really jumpy. I have this JS-code:

$(window).scroll(function () {

        var scroll_top = $(this).scrollTop();
           if (scroll_top > 66) {//height of header
             $('.wrapper').addClass('sticky');
          } else {
          $('.wrapper').removeClass('sticky');
          }
   });

And the HTML:

<div class="wrapper">
     <h4>Ausgaben in Millionen Franken</h4>
     <div class="background">
          <div id="kunstmuseum"></div><div id="historisch"></div><div id="naturhist"></div><div id="kulturen"></div><div id="antik"></div><div id="beyeler"></div><div id="weitereMuseen"></div><div id="theaterBasel"></div><div id="kaserne"></div><div id="weitereTheater"></div><div id="sinfonie"></div><div id="jazz"></div><div id="rock"></div><div id="literatur"></div><div id="erbe"></div><div id="wettbewerb"></div><div id="weiteres"></div><div id="zoo"></div>
    </div>
    <div id="eins">0</div>
    <div id="zwei">30</div>
    <div id="drei">60</div>
    <div id="vier">90</div>
    <div id="fuenf">120</div>
    <div id="eingespart"><h4>Total eingespart:&ensp;<div id="totalSum">0&ensp;CHF</div></h4></div>
</div>

Here is the jsfiddle: http://jsfiddle.net/w640ftLf/3/

Answer 1

It looks like you're attaching the sticky class to the wrong element. Try this, instead:

$(window).scroll(function () {
    var scroll_top = $(document).scrollTop();
    if (scroll_top > 66) {//height of header
        $('.background').addClass('sticky');
     } else {
        $('.background').removeClass('sticky');
     }
});

Also, for education, you can take a look at how your example is doing it .

Answer 2

It's not really how I would do it, but your function works fine.

The easiest way to fix your problem is to add padding-top: 66px; (66 being the header height) to the body element at the same time you add the class 'sticky'.

Let me know if this works for you.