CODEWITHSUNDEEP
javascriptjquery
Toon
Toon

Reputation: 652

Changing element style depending on the style of scrollable content

Need help to newbie. I have a list elements inside scrollable div(tiny scrollbar) with different background colors: red and blue. Also i have a two square divs with red and blue background colors.

ToDo: add class 'border' to the blue square div, when list is scrolled to the first blue colored element.

Here's example: http://jsfiddle.net/uy4hK/19/

I guess there should be something like a position trigger for different colored list elements. Need help!

Upvotes: 1

Views: 152

Answers (1)

IUnknown
IUnknown

Reputation: 22448

You may customize the plugin to support scrolling events. Modify the whell and drag functions as below:

function wheel(oEvent) {
    if (!(oContent.ratio >= 1)) {
        oEvent = $.event.fix(oEvent || window.event);
        var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3;
        iScroll -= iDelta * options.wheel;
        iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
        oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
        oContent.obj.css(sDirection, -iScroll);
        oEvent.preventDefault();

        // New code
        if (options.onScroll && typeof (options.onScroll) == "function") {
            options.onScroll.call(this);
        }
    };
};

function drag(oEvent) {
    if (!(oContent.ratio >= 1)) {
        iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
        iScroll = iPosition.now * oScrollbar.ratio;
        oContent.obj.css(sDirection, -iScroll);
        oThumb.obj.css(sDirection, iPosition.now);

        // New code
        if (options.onScroll && typeof (options.onScroll) == "function") {
            options.onScroll.call(this);
        }
    }
    return false;
};

Then you can pass a custom function that will be executed on scrolling:

$(function () {
     var fisrtBlueOffset = $(".overview li.blue:first").offset().top;
     var viewportHeight = $(".viewport").height();
     $('#scrollbar1').tinyscrollbar({
          "onScroll": function () {
               var viewportTop = parseInt($(".overview").css("top"));
               if (fisrtBlueOffset + viewportTop < viewportHeight) {
                    $(".blue-block").css("border", "1px solid #000");
               }
               else {
                    $(".blue-block").css("border", "");
               }
          }
     });
});

Upvotes: 1

Related Questions