Geek Answers Handbook

Show / hide div jquery not working in fixed position

show / hide divusing jquery does not work, if div wrapperany position:fixed, but if, change to position:relativeshow / hide divto work.

here is the position script: relative

and this violin position: fixed , is not displayed 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 */

Does anyone have an idea ...

+4
source share
4 answers

because your code is here

$(document).scroll(function(){

so your scroll functionwork if you scroll documentor body, but since you are using position: fixed, there is not scrollbarin body, but scrollbaris to continue to

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

scroll function ,

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


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

+2

, fixed left top 0, relative ​​ .

css :

top:20px
0

I guess that #right{position: relative/fixed }affects behavior.

position: fixed: The item is relative to the browser window.

position: relative: The element is positioned relative to its normal position.

0
source

Bind scroll to div#right

$("#right").scroll(function () {
    console.log("scrolling")
    var vis = ($(document).scrollTop() > ($('.passedMe').offset().top + $('.passedMe').height()));
     $('.showHide').css('display', vis?'':'none')
});

Demo

0
source

More articles:


All Articles