向下滚动时如何将标题固定在列表顶部？

Question

I'm willing to display a scrollable list divided in 2 categories. Each category has a title and I'd like these titles to remain visible when I scroll down the list.

I know similar questions have been asked and I've tried using scrollTop but it I couldn't make it work within a list.

Any help is much appreciated.

Answer 1

Simply set the CSS position of the element you want to keep in place to 'fixed'.

#fixedDiv{
position:fixed; 
} 

Answer 2

this is what I used in the past. it works on the <tag id="containerToFix"> there are a number of VAR's that you may need to play with

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 });
    };
});