Сделать элемент затухающим при прокрутке и наоборот

Question

У меня есть элемент .scroll с overflow:hidden, чей контент больше, чем он сам. Я использую javascript для прокрутки содержимого вверх и вниз путем зависания ссылок - .scrollcontrol.up и .scrollcontrol.down, расположенных сверху и снизу элемента .scroll соответственно.

Ниже приводится код, который я до сих пор:

$(function() { 
    var ele = $('#scroll'); 
    var speed = 25, scroll = 5, scrolling; 

    $('.scrollcontrol.up').mouseenter(function() { 
    // Scroll the element up 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() - scroll); 
    }, speed); 
    }); 

    $('.scrollcontrol.down').mouseenter(function() { 
    // Scroll the element down 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() + scroll); 
    }, speed); 
    }); 

    $('.scrollcontrol.up, .scrollcontrol.down').bind({ 
    click: function(e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    }, 
    mouseleave: function() { 
     if (scrolling) { 
      window.clearInterval(scrolling); 
      scrolling = false; 
     } 
    } 
    }); 
}); 

, и я хотел бы, что, когда я парить на .scrollcontrol.down, .scrollcontrol.up выцветает и когда прокрутка закончится .scrollcontrol.down исчезает, и наоборот.

Вы можете найти полный код этой JSFiddle

Ждем ваших решений!

Answer 1

Вы можете обнаружить, когда свиток достигает дна, используя следующие, как указано в этом answer как:

if ($ele.scrollTop() + $ele.innerHeight() >= $ele[0].scrollHeight) { 
    // reached bottom 
} 

И вы можете обнаружить, когда свиток достиг сверху, проверяя, является ли .scrollTop() равно 0.

if (!$ele.scrollTop()) { 
    // reached top. 
} 

---

Таким образом, используя те, полный код будет выглядеть так:

$(function() { 
var $ele = $('#scroll'), 
    speed = 25, 
    scroll = 5, 
    scrolling; 

$('#scroll-up').mouseenter(function() { 
    // Scroll the element up 
    var $this = $(this); 
    $("#scroll-down").fadeIn(); 
    scrolling = setInterval(function() { 
     if (!$ele.scrollTop()) { 
      $this.fadeOut(); 
      clearInterval(scrolling); 
     } else $ele.scrollTop($ele.scrollTop() - scroll); 
    }, speed); 
}); 

$('#scroll-down').mouseenter(function() { 
    // Scroll the element down 
    var $this = $(this); 
    $("#scroll-up").fadeIn(); 
    scrolling = setInterval(function() { 
     if ($ele.scrollTop() + $ele.innerHeight() >= $ele[0].scrollHeight) { 
      $this.fadeOut(); 
      clearInterval(scrolling); 
     } 
     else $ele.scrollTop($ele.scrollTop() + scroll); 
    }, speed); 
}); 

$('.scrollcontrol.up, .scrollcontrol.down').bind({ 
    click: function (e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    }, 
    mouseleave: function() { 
     if (scrolling) { 
      window.clearInterval(scrolling); 
     } 
    } 
}); 
}); 

Updated Fiddle

Примечание стороны:

Я клиринговый интервал после того, как условие выполняется, в противном случае он будет держать при выполнении, пока мышь не выйдет, даже если мы достигли вершины/дна.

Answer 2

Get ДИВ scrol верхней и установить этот

$(window).scroll(function() { 
      if ($(this).scrollTop() > 100) { 
       $('#toTopBtn').fadeIn(); 
      } else { 
       $('#toTopBtn').fadeOut(); 
      } 
     });