スクロール可能なリストを 2 つのカテゴリに分けて表示したいと考えています。各カテゴリにはタイトルがあり、リストを下にスクロールしてもこれらのタイトルが表示されたままになるようにしたいと思います。
同様の質問が寄せられていることを知っており、scrollTop を使用してみましたが、リスト内で機能させることができませんでした。
どんな助けでも大歓迎です。
スクロール可能なリストを 2 つのカテゴリに分けて表示したいと考えています。各カテゴリにはタイトルがあり、リストを下にスクロールしてもこれらのタイトルが表示されたままになるようにしたいと思います。
同様の質問が寄せられていることを知っており、scrollTop を使用してみましたが、リスト内で機能させることができませんでした。
どんな助けでも大歓迎です。
保持したい要素の CSS 位置を「固定」に設定するだけです。
#fixedDiv{
position:fixed;
}
これは私が過去に使用したものです。それは<tag id="containerToFix">
あなたが遊ぶ必要があるかもしれない多くのVARがある上で動作します
var scrollLabel = false;
var scrollPadding = 40; //height from top of page
//use window.scroll NOT document.scroll for IE8, 7, 6
$(window).scroll(function () {
var bottomScroll = $('.header').offset().top; //container of Tag above
var maxScrolling = bottomScroll - (maxHeightOfContainerToFix) - (scrollPadding);//(scrollPadding) may not be needed for you
var startScrolling = $('.ten').offset().top - scrollPadding;
if ($(window).scrollTop() > startScrolling && $(window).scrollTop() < maxScrolling) {
$('#containerToFix').css({ 'position': 'fixed', 'top': scrollPadding + 'px' });
$('#containerToFix').addClass('ie7Fixed');
}
else if ($(window).scrollTop() < startScrolling) {
$('#containerToFix').css({ 'position': '' });
}
else if ($(window).scrollTop() > maxScrolling) {
scrollPosition = maxScrolling - $(window).scrollTop();
$('#containerToFix').css({ 'top': scrollPosition + scrollPadding + 2 });
};
});