当窗口滚动时，我想追加一个div并在滚动回顶部时隐藏div？

Question

I want to create a function, when user scroll down to the middle, the menu will have a class 'sticky', when the div has class 'sticky', I want to append a div. The issue is that it will keep append the div when I scroll. Second issue is that, when I scroll back to the top, the the append sticky stay. help, appreciate.

  jQuery(window).scroll(function(){ if(jQuery('.main-menu-top').hasClass('sticky')){ jQuery('.main-menu-top').append('<div id="checkout_sticky"></div>'); }else{ /*I want to hide the checkout_sticky, try hide(), doesn't work*/ }); 

Answer 1

You need to create something that changes once complete. To do so,

create a var with the value of true, and then in your if statement check if it is true, if so run function and then in that function change the value of the var to false.

var test = true;

jQuery(window).scroll(function(){

           if(jQuery('.main-menu-top').hasClass('sticky') && test==true){
test = false;
               jQuery('.main-menu-top').append('<div id="checkout_sticky"></div>');
                   }else{
            /*I want to hide the checkout_sticky, try hide(), doesn't work*/
   });

To make it hide, you could try;

else { 
    $('#checkout_sticky').css("visibility","hidden");  
}

If that doesn't work you can try,

$('#checkout_sticky').removeAttr('id');