Javascript 通过滚动打开和关闭div，并在到达特定区域时淡入淡出

我有一个响应性网站，我有下面的代码，当他向下滚动时，显示窗口右侧的一个div，但当他向上滚动时，div会慢慢消失并移动到右侧， 问题是，有时它打开，有时它不打开，无法保证我的div在到达某个部分时总是打开和关闭 我将如何实现这一目标

注意：每次用户滚动时都会调用testAnim，但div并不总是打开/关闭，这是因为可能会发生太多的滚动吗

if(true)
{
    if($('.container').css('display') == 'none' || 
       $('.container').css('width') == '0px'){
        testAnim();
    }
} else {
    if($('.container').css('display') == 'block'){
        testAnimBack();
    }
}

function testAnim() {
    $('.container').css('display','block').promise();
    $(".container").animate({  width: '21.16%',opacity:'1.0'}, 500).promise();
};

function testAnimBack() {
    $(".container").animate({  width: '0px',opacity:'0'}, 500).promise().done(function(){
        $('.container').css('display','none').promise();
    });
}

---

在我看来，您需要调用

.scroll（）

jQuery方法中的函数：

$(window).on('scroll', function(){
    if($(this).scrollTop() > 100){ // check for the specific scroll top
       testAnim();
    }
});

然后更新

testAnim（）

函数，如下所示：

function testAnim() {
  if($('.container').css('display') == 'none' || 
     $('.container').css('width') == '0px'){
        $('.container').css('display','block');
        $(".container").stop().animate({  width: '21.16%',opacity:'1.0'}, 500);
  }else if($('.container').css('display') == 'block'){
        $(".container").animate({width: '0px', opacity:'0'}, 500, function(){
             $(this).css('display','none');
        });
  }
} // end of function

---

这样，您就不需要编写两个单独的函数。

检查下面的链接，在那里我更改了一些逻辑

来自小提琴的Javascript：

<script>
function test()
{
       if($('.container').css('display') == 'none' ||  $('.container').css('width') == '0px'){
            testAnim();
        }
    else if($('.container').css('display') == 'block'){
            testAnimBack();
        }


}
function testAnim() {
    $('.container').css('display','block').promise();
    $(".container").animate({  width: '21.16%',opacity:'1.0'}, 500).promise();
};

function testAnimBack() {
    $(".container").animate({  width: '0px',opacity:'0'}, 500).promise().done(function(){
        $('.container').css('display','none').promise();
    });
}
</script>

功能测试（）
{
如果（$（'.container'）.css（'display'）='none'| |$（'.container'）.css（'width'）=='0px'））{
testAnim（）；
}
else if（$（'.container'）.css（'display'）='block'））{
testAnimBack（）；
}
}
函数testAnim（）{
$（'.container'）.css（'display'，'block'）.promise（）；
$（“.container”）.animate（{width:'21.16%，不透明度：'1.0'}，500.promise（）；
};
函数testAnimBack（）{
$（“.container”）.animate（{width:'0px'，不透明度：'0'}，500.promise（）.done（function（））{
$（'.container'）.css（'display'，'none'）.promise（）；
});
}

请拿把小提琴。当它到达某一部分时……再解释一下。如果（真的）是你做的错误的方式。@Jai我有菜单，它们只是以同样的方式向下滚动page@C-link而不是true我有一些条件，它们在我们向下滚动时被调用，所以这不是问题。如果条件在从$（窗口）调用的函数中，则发布。滚动（function（）每次有滚动时也会调用testAnim，但它并不总是动画。基本上，滚动时不会按按钮