jquery - 显示/隐藏 div jquery 不能在固定位置工作

Question

显示/隐藏 div 当 div wrapper 为 position:fixed 时，使用 jquery 不起作用，但是如果，更改为 position:relative show/hide div 恢复工作。

这是 fiddle of position:relative

这是 fiddle of position:fixed div show/hide 没有显示。

var flag = 0;
var leftValue;
$('#button').on('click',function(){
      flag = !flag;
      leftValue = flag ? 100 : 0;
        $('#right').animate({ left: leftValue }, 'slow', function() {
            $('#button').text(function(i,v){
           return v == 'Close' ? 'Menu' : 'Close';
         });
        });
    });

/* show/hide DIV when passed the other div */
       $(document).scroll(function(){
       var vis = ($(document).scrollTop() > ($('.passedMe').offset().top+$('.passedMe').height()));
       $('.showHide').css('display', vis?'':'none')
       });
      /* show/hide DIV when passed the other div */

有没有人有想法...

Answer 1

那是因为你的代码在这里

$(document).scroll(function(){

因此，如果您正在滚动文档 或body，您的滚动功能 将起作用，但因为您使用了position: fixed ，body中没有scrollbar，但是scrollbar在

中

<div id="right">
    ...
</div>

这使得 scroll 函数 永远不会被调用，所以你需要改变

$(document).scroll(function(){
    ...
});

到

$("#right").scroll(function(){    // Depend on the container that use the position: fixed;
    ...
});

这是 Updated Fiddle