Блог

Я пытаюсь заставить div получать фиксированное позиционирование, когда его родительский элемент попадает в верхнюю часть окна, и терять его, когда он попадает в нижнюю часть … по какой-то причине я могу заставить его получить фиксированное позиционирование, но не потерять его. занимаюсь этим уже некоторое время, и я просто не могу в этом разобраться…

Вот мой код на данный момент. Кто-нибудь может увидеть, что я чего-то не хватает или облажался?

     $(window).bind('scroll',function(event) {
    $('.posthead').each(function(e) {
        var y = $(window).scrollTop();
        var windowHeightS = $('body').height();

        var postheadh = $(this).height()   30;
        var top = $(this).offset().top - parseFloat($(this).css('margin-top').replace('auto', 0));

        var postheight = $(this).parent('.type-post').height();
        var windowHeight = windowHeightS - top;

        //var top = getposition.top;

        var postTop = top - y;
        var postBottom = postheight   top - y;


        $(this).parent('.type-post').children('.debug').html('Position from top: <span>'   y   "</span> bottom: <span>"   postBottom   "</span>");


        if(postTop <= 0) { $(this).addClass('fixed'); }
        else if(postTop >= 0) { $(this).removeClass('fixed'); }

        if(postBottom <= 0) { $(this).removeClass('fixed'); }       
    });
});
  

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

Я прокомментировал ваш код, чтобы вы, возможно, сами разобрались в проблеме.

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

http://www.ferociouscoder.com/test.html

<тип стиля="текст / css">
html { 
 цвет фона:#FFF;
 высота: 100%;
}
тело { 
 цвет фона:#CCC;
 высота: 1600 пикселей;
} 
.posthead { 
 цвет фона: #0FF;
 верхнее поле: автоматически;
}
.тип-post { 
 цвет фона:#FF0;
 высота: 500 пикселей;
}
.исправлено { 
 положение: исправлено;
 цвет:#F00;
}
</style>

<скрипт>
$(window).bind('scroll',функция(событие) {
 $('.posthead').each(функция(e) { 
 var y = $ (window).scrollTop(); // Насколько полоса прокрутки справа переместилась сверху. Зависит от размера полосы прокрутки.
 var windowHeightS = $('body').height(); //600 пикселей;

 var postheadh = $(this).height ()   30; //postheadh = высота ДОЧЕРНЕГО элемента   30 (я не знаю, почему это так, но нормально)
 var top = $(this).offset().top;// - parseFloat($(this).css('margin-top').replace('auto', 0)); //Как далеко дочерний div находится от верха страницы.


 var postheight = $(this).parent('.type-post').height(); //Высота родительского элемента 
 var windowHeight = windowHeightS - top; //Как далеко находится верхняя часть родительского div-файла от нижней части тега body

 //var top = getposition.top;

 var postTop = top - y; //Поскольку позиция родительского div фиксирована. Это никогда не меняется. Это будет значение верхнего поля тега body.
 var postBottom = postheight   top - y; //Поскольку позиция родительского div фиксирована. Это также никогда не меняется. Это будет значение высоты родительского div   константа выше.

 $(this).parent('.type-post').children('.debug').html('Позиция сверху: '   y   "снизу: "   (windowHeightS-postheight)   "");

 if(y > = 0) { $(this).parent().addClass('fixed');} //postTop никогда не меняется! Я полагаю, что вам нужно y. Также вы хотите, чтобы они оставались фиксированными, пока не достигнут дна.

 //else if (y > = 0) { $ (this).removeClass('исправлено'); } Я прокомментировал это, потому что это удалило фиксированное позиционирование, как только вы не находитесь в верхней части экрана. Когда он доходит до дна, он снова пытается удалить class fixed (но вы уже это сделали!)

 if(y > = (windowHeightS - postheight)) { $(this).parent().removeClass('fixed');}//postBottom никогда не меняется! что вам нужно увидеть, так это то, что вы прокрутили больше (или равно) высоты родительского контейнера
 });
});
</script>
</head>
<тело>
 <div class="type-post"><br>
 РОДИТЕЛЬСКИЙ DIV 'TYPE-POST'<br>
 <div class="posthead debug">
 ДОЧЕРНИЙ DIV 'POSTHEAD'<br>
 </div>
 </div>
</body>
</html>