jQuery：當特定div溢出滾動100px時顯示元素？

Question

通常我會在我的一些項目中使用它。

    //Back to top
    $(window).scroll(function () {

            if ( $(window).scrollTop() > 100 ) {
                $('#back-to-top').fadeIn('fast');
            } else {
                $('#back-to-top').fadeOut('fast');
            }

    });

    $(window).scroll();

這意味着每當用戶從頂部向下滾動更像100px時，返回頂部的箭頭就會消失。

這次我在div中有一個水平滾動條，它的overlow-x設置為auto 。 看起來像這樣......

<section id="slider" class="horizontal">
    <!-- Some Images that are floated left -->
    <div id="back-to-left"></div>
</section>

.horizontal {
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0;
}

所以它只是一個div，有很多圖像並排在這個div底部的水平滾動條。

當我在這個div中滾動超過某個值時，我只想顯示這個#back-to-left按鈕 - 也許再次像100px。

在這種情況下我該怎么做？

謝謝您的幫助。

Answer 1

您可以使用scrollLeft()來確定位置

所以你想要做類似的事情

$('#slider').scrollLeft() > 100