Плавная прокрутка с клейким DIV

Question

Я хочу создать липкий DIV так гладко, как в этом примере: http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html?src=tp&_r=0

Прямо сейчас, мой пример Isnt гладкого на всех, но на самом деле дрожать. У меня есть этот JS-код:

$(window).scroll(function() { 

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

И в 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> 

Вот jsfiddle: http://jsfiddle.net/w640ftLf/3/

Answer 1

На самом деле это не так, как я бы это сделал, но ваша функция работает нормально.

Самый простой способ исправить вашу проблему - добавить padding-top: 66px; (66, являющийся высотой заголовка) в элемент body, в то же время вы добавляете класс «липкий».

Дайте мне знать, если это сработает для вас.

Answer 2

Похоже, вы крепление sticky класса к неправильному элементу. Попробуйте это вместо:

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

Кроме того, для образования, вы можете взглянуть на how your example is doing it.