Fade Element With Div Scroll

by iscrow

HTML

<div class="scroll">
  <nav class="quick-links">
    <a href="/greenhouse/">GREENHOUSE</a>
    <span class="pipe">|</span>
    <a href="/rock-mulch/">ROCK &amp; MULCH</a>
    <span class="pipe">|</span>
    <a href="/home-decor/">HOME DECOR</a>
    <span class="pipe">|</span>
    <a href="/christmas-shop/" class="last">CHRISTMAS SHOP</a>
    <img src="http://reds.ggmd.synology.me/wp-content/themes/reds/images/icon_triangle.png" width="16" alt="scroll right" class="triangle">
  </nav><!-- .quick-links -->
</div>

CSS

div.scroll{
  width: 200px;
  height: 200px;
  overflow: scroll;
  white-space: nowrap;
}

.triangle {
    position: fixed;
    right: 10px;
    margin-top: 4px;
    opacity: 0.8;
    display: inline;
}

JavaScript

$(".scroll").scroll(function() {
    fadeDelay = 0.7; //Value between 0 and 1.
    fadeDelay = 1 - fadeDelay;
    totalDistance = $(this)[0].scrollWidth-$(this).innerWidth();
    scrolledDistance = $(this).scrollLeft();
    scrolledPercent = scrolledDistance/totalDistance;
    markerOpacity = 1 - scrolledPercent;
    markerOpacity = -(markerOpacity-fadeDelay)/(0-fadeDelay) + 1;
    $(".triangle").css("opacity", markerOpacity);
    //console.log("TotalDistance:", totalDistance, " ScrolledDistance:", scrolledDistance, " Opacity:", markerOpacity)
});