根據可滾動內容的樣式更改元素樣式

Question

需要幫助給新手。我有一個滾動div（小滾動條）內的不同背景顏色的列表元素：紅色和藍色。另外我有一個兩個紅色和藍色背景顏色的方形divs。

待辦事項：當列表滾動到第一個藍色彩色元素時，將類「邊框」添加到藍色方形div。

這裏的例子：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", ""); 
       } 
      } 
    }); 
});