jquery - 使用jquery根据滚动位置显示和隐藏元素

Question

我的代码正在运行，但我想知道是否可以用更少的代码行来完成？我该如何改进它？

http://jsfiddle.net/f8sHN/3/

var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');

function isFadingIn($el){
    return ($el.data('fadingIn') == true);
}
function isFadingOut($el){
    return ($el.data('fadingOut') == true);
}
function isVisible($el){
    return ($el.css('display') == 'block')
}
function isHidden($el){
    return ($el.css('display') == 'none')
}
function isBelow($el){
    return ($el.scrollTop() > 10)
}
function isAbove($el){
    return ($el.scrollTop() < 10)
}

$ccol.scroll(function(){
    console.log($ccol.scrollTop());

    if(isBelow($ccol) && (isHidden($scb) || isFadingOut($scb)) ){
        $scb.data('fadingIn',true);
        $scb.stop(true).fadeIn('4000', function(){
                $(this).data('fadingIn',false)
            });
        console.log("fadeIn");
    }
    if(isAbove($ccol) && (isVisible($scb) || isFadingIn($scb)) ){
        $scb.data('fadingOut',true);
        $scb.stop(true).fadeOut('4000', function(){
                $(this).data('fadingOut',false)
            });
        console.log("fadeOut");
    }

});

Answer 1

设法缩短了一点：

var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);

$('.content').scroll(function(){
    $scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});

http://jsfiddle.net/f8sHN/8/

---

另一个版本：

var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');

$ccol.scroll(function(){
    $scb.filter($ccol.scrollTop() > 10 ? ':hidden' : ':visible').stop(true,true).fadeToggle(500);
});

http://jsfiddle.net/f8sHN/11/