скроллинг - JQuery показывает скрытое содержание, когда оно достигло

Question

Я после этого примера на jsFiddle: http://jsfiddle.net/jackdent/gRzPF/12/

... автоматически загружать больше контента, когда пользователь достигает конца текущего отображаемого контента. К сожалению, этот пример, похоже, работает только тогда, когда .content div имеет высоту набора в пикселях в CSS.

Как достичь желаемого результата без установки высоты? У меня есть тонна информации на одной странице, разбитая на несколько разделов, которую я хочу скрывать до того, как пользователи прокрутятся до нее, и в какой момент она появится.

Посмотрел на бесконечные плагины прокрутки, но все примеры, похоже, предназначены только для удаленного контента. Мне в основном нужно одно и то же, но для контента на одной странице. Я компетентен только с HTML/CSS, я могу вставить JQuery и поиграться со значениями немного, но я иначе страшно с ним ...

---

JQuery

//Set intital divs to be hidden 
$(".content").addClass("noshow"); 
    var contentNumber = 0; 

    function reveal() { 
     var constraintNumber = contentNumber + 6; 
     //IMPORTANT - DO NOT DELETE 
     $(window).trigger('resize'); 
     //IMPORTANT - DO NOT DELETE 
     for (i = contentNumber; i < constraintNumber; i++) { 
      //Get the nth div of class content, where n is the contentNumber, and make it shown 
      $('.content').eq(contentNumber).removeClass("noshow"); 
      contentNumber ++; 
     } 
    } 

//Window scroll function 
$(window).scroll(function() { 
    if ($(window).scrollTop() == $(document).height() - $(window).height()) 
     { 
     reveal(); 
     } 
}); 
reveal(); 

---

HTML

<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 
<div class="content">I have some content</div> 

---

CSS

.content { 
    margin: 1px; 
    width: 200px; 
    height: 400px; 
    border: 1px solid black; 
    float: left; 
    background-color: gray; 
} 

.noshow{ 
    display: none; 
} 

Answer 1

Установите высоту на "авто". Я преуспел в вашей скрипке, добавив еще немного контента в DIV.

Answer 2

Даже без установки высоты он будет прокручиваться. Убедитесь, что в div есть достаточное количество div с содержимым класса и содержимым, которое создаст полосу прокрутки при загрузке первой страницы.

Вы можете попробовать удалить поплавок: слева от css