根据可滚动内容的样式改变元素样式

Question

新手需要帮助。我有一个列表元素内可滚动的div(小滚动条)与不同的背景颜色:红色和蓝色。另外，我有两个方形div的红色和蓝色的背景色。

待办事项:当列表滚动到第一个蓝色元素时，为蓝色的正方形div添加类border

示例:http://jsfiddle.net/uy4hK/19/

我想应该有一个类似于不同颜色的列表元素的位置触发器。需要帮助!

Answer 1

你可以自定义插件来支持滚动事件。修改whell和drag函数如下:

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

然后你可以传递一个自定义函数，它将在滚动时执行:

$(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", "");
               }
          }
     });
});