Masquer div absolu sur le rouleau

Question

J'ai un div avec position: absolute; qui est en haut à droite sur l'écran.

.selectState { 
    position: absolute; 
    top: 96px; 
    right: 0; 
    font-size: 12px; 
    background-color: #f1f1f1; 
    color: #428bca; 
} 

Lorsque l'utilisateur fait défiler vers le bas que je veux cacher div. Comment faire cela avec javascript ou CSS?

Answer 1

Voici une solution multi-navigateur non-jQuery:

window.addEventListener('scroll', function() { 
    var scrollAmount = window.scrollY || document.documentElement.scrollTop; 
    if (scrollAmount > 0) 
    document.querySelector('your-element').style.display = 'none'; 
    else 
    document.querySelector('your-element').style.display = 'block'; 
}); 

Cela fonctionne pour IE8 +. Si vous souhaitez que la div soit masquée lorsque l'utilisateur a déjà fait défiler un bit, changez simplement le chiffre 0 pour le masquer.

Answer 2

Si vous souhaitez utiliser jQuery, le ci-dessous le faire:

// detect when the window is being scrolled 
$(window).scroll(function(){ 
    // if the top is more than 96px (the top offset of your element) 
    if($(window).scrollTop() > 96){ 
     // hide the element 
     $('.selectState').hide(); 
    }else{ 
     // otherwise show it 
     $('.selectState').show(); 
    } 

}); 

Vous pouvez réduire encore à:

$(window).scroll(function(){ 
    $(window).scrollTop() > 96 ? $('.selectState').hide() : $('.selectState').show();  
}); 

Answer 3

Vous pouvez le faire en utilisant Jquery:

var $scrolldiv = $('#div'); // Add your div's id here 
$(window).scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     $scrolldiv.fadeIn(); 
    } else if ($scrolldiv.is(':visible')) { 
     $scrolldiv.fadeOut(); 
    } 
}); 

Answer 4

Vous ne pouvez pas faire cela en utilisant CSS. Parce que CSS n'a aucune méthode pour capturer les événements du navigateur ou de la fenêtre.

Cependant, vous pouvez le faire en utilisant JavaScript ou jQuery. De cette façon, vous pouvez obtenir l'emplacement de l'utilisateur dans le DOCUMENT et modifier les propriétés.