显示/隐藏div jquery无法在固定位置工作

2023年7月1日 229次阅读

使用
jquery显示/隐藏div当div包装器处于position：fixed但是如果,改为position：relative show / hide div返回工作状态.

这是fiddle of position:relative

而这是07显示/隐藏的div显示.

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 */

有谁有想法……

最佳答案 那是因为你的代码在这里

$(document).scroll(function(){

因此,如果您正在滚动文档或正文,则滚动功能将起作用,但由于您使用position：fixed,因此正文中没有滚动条,但滚动条位于

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

这使得滚动函数永远不会被调用,所以你需要改变

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

至

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

这是Updated Fiddle

点赞