Question

我有一个带图像的垂直滑块和两个按钮（向上和向下滑动）。我设法使它们消失但我不能在它们应该的时候制造收割机。 jsfiddle应该是自我解释的。欢迎任何建议。

function set(scrolled){
var scrolle = scrolled;
if(scrolle<1){
    $('.up').hide();
}else if(scrolle>=400){
    $('.down').hide();
}else if(scrolle > 10){
    $('.up').show();
}else if(scrolle<400){
    $('.down').show();        
}

}

Jsfiddle

Answer 1

如果我理解你的要求，你需要更改你的代码：

else if(scrolle > 10){
    $('.up').show();

通过添加.down来显示，就像这样：

else if(scrolle > 10){
    $('.up, .down').show();

检查以下代码段：

$(document).ready(function () {
    var scrolled = 0;
    $('.up').hide();
    $(".down").on("click", function () {
        scrolled = scrolled + 50;
        console.log(scrolled);
        set(scrolled);
        $("#container").animate({
            scrollTop: scrolled
        });
    });

    $(".up").on("click", function () {
        scrolled = scrolled - 50;
        console.log(scrolled);
        set(scrolled);
        $("#container").animate({
            scrollTop: scrolled
        });
    });

    function set(scrolled) {
        var scrolle = scrolled;
        if (scrolle < 1) {
            $('.up').hide();
        } else if (scrolle >= 400) {
            $('.down').hide();
        } else if (scrolle > 10) {
            $('.up, .down').show();
        } else if (scrolle < 400) {
            $('.down').show();
        }
    }
});

#container {
    border:solid 1px red;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: auto;
    position: absolute;
    height: 400px;
    width: 300px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.cent {
    text-align:center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container" class="cent">
    <img id="image1" src="http://placehold.it/100/50/sports/1/">
    <img id="image2" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image3_small" src="http://lorempixel.com/100/50/city/1/">
    <img id="image4" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image5" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image6" src="http://lorempixel.com/100/50/city/1/">
    <img id="image1" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image2" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image3_small" src="http://lorempixel.com/100/50/city/1/">
    <img id="image4" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image5" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image6" src="http://lorempixel.com/100/50/city/1/">
    <img id="image1" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image2" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image3_small" src="http://lorempixel.com/100/50/city/1/">
    <img id="image4" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image5" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image6" src="http://lorempixel.com/100/50/city/1/">
    <img id="image1" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image2" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image3_small" src="http://lorempixel.com/100/50/city/1/">
    <img id="image4" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image5" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image6" src="http://lorempixel.com/100/50/city/1/">
    <img id="image1" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image2" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image3_small" src="http://lorempixel.com/100/50/city/1/">
    <img id="image4" src="http://lorempixel.com/100/50/sports/1/">
    <img id="image5" src="http://lorempixel.com/100/50/fashion/1/">
    <img id="image6" src="http://placehold.it/100/50/city/1/">
</div>
<button class="up">UP</button>
<button class="down">Down</button>

如何在垂直滑块上显示/消除按钮/向下按钮？

1 个答案: