[jQuery] Sticky element in scrollbare div

[Alm4riC]

Hee,

Een aantal dagen zit ik al vast in een probleem. Ik heb een pagina waarom een div staat met daarin een aantal items (afbeeldingen). Deze div heeft een vaste hoogte met overflow: auto en custom scrollbars. Tot dusver gaat het goed. Hieronder even de code:

HTML:

<div id="content">
  <div class="item">
    <div class="titleHolder"></div>
    <img src="" />
  </div>
</div>
<div id="content">
  <div class="item">
    <div class="titleHolder"></div>
    <img src="" />
  </div>
</div>
<div id="content">
  <div class="item">
    <div class="titleHolder"></div>
    <img src="" />
  </div>
</div>

Echter nu wil ik de div .titleHolder mee laten scrollen naar beneden binnen de div item, zodat deze over het plaatje komt te staan. Dit doe ik ook met behulp van jquery, omdat deze onderaan het item weer moet stoppen en de volgende titleHolder moet worden meegenomen. Het lukt echter niet om dit te doen binnen de scrollbare div content welke een fixed height heeft en overflow op auto. Op een of andere manier werkt het alleen voor het gehele scherm zoals te zien in mijn voorbeeld.

Cascading Stylesheet:

    #content
    {
        position: relative;
        height: 1530px;
        width: 590px;
        margin-left: 50px;
        margin-top: 130px;
        overflow: auto;
    }

    .item
    {
        position: relative;
        width: 590px;
        min-height: 200px;
        margin-bottom: 20px;
        padding-top: 55px;
        border-top: 1px #999999 solid;
    }

    .titleHolder
    {
        position: fixed;
        height: 40px;
        top: 10px;
        right: 30px;
        background-color: transparent;
    }

Verder staat er onder aan de pagina dit stukje jquery

JavaScript:

<script type="text/javascript">
        (function($){
            $(window).load(function(){
                $("#content").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
            });
        })(jQuery);

        $(function() {
            $(".titleHolder").jScroll({speed : "normal"});
        }) (jQuery);
    </script>

Wat ik al heb geprobeerd zijn verschillende stukken jquery (inclusief bijbehorende bestanden) voor de scrollbars en voor het 'sticky' element. Deze gaven echter allemaal hetzelfde resultaat. Ook heb ik geprobeerd de div titleHolder op alle mogelijke manieren te positioneren, absolute, fixed, relative, echter ook daar geen resultaat. Ik denk dat ik iets over het hoofd zie, of het is gewoon helemaal niet mogelijk.

Voorbeeld: http://code51.nl/scroll/algemeen

Is er iemand die me iets verder kan helpen? Of is het gewoon niet mogelijk? Thnx!

[ Voor 26% gewijzigd door Alm4riC op 23-01-2013 14:20 ]

[Alm4riC]

Niemand enig idee?

[ Voor 4% gewijzigd door Alm4riC op 24-01-2013 10:31 ]

[Bosmonster]

Je zegt nu dat je overflow: auto gebruikt, maar ik zie dat je een custom scrollbar gebruikt?

[Alm4riC]

Overflow staat inderdaad op auto, echter maakt het geen verschill of ik deze op auto, hidden of scroll heb staan. Er wordt altijd een custom scrollbar overheen geplaatst.