Afficher la div sur la déroulant après 800px
Je veux afficher un div caché lorsque le défilement vers le bas après 800px de haut de la page. Maintenant j'ai cet exemple, mais je suppose qu'il doit être modifié afin d'arriver à ce que je suis à la recherche d'.
EDIT:
[Et quand scrollUp et la hauteur est de moins en moins le 800px, cette division doit masquer]
HTML:
<div class="bottomMenu">
<!-- content -->
</div>
css:
.bottomMenu {
width: 100%;
height: 60px;
border-top: 1px solid #000;
position: fixed;
bottom: 0px;
z-index: 100;
opacity: 0;
}
jQuery:
$(document).ready(function() {
$(window).scroll( function(){
$('.bottomMenu').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
Ici est un Violon de mon code actuel.
- Avez-vous essayé de le faire? Tout ce que vous devez faire est de déterminer si vous êtes plus de 800 pixels vers le bas et afficher un div.
- Oui j'ai essayé! Mais comment déterminer?
Vous devez vous connecter pour publier un commentaire.
Si vous souhaitez afficher un div après avoir fait défiler un nombre de pixels:
Exemple De Travail
JS:
CSS:
HTML:
Son simple, mais efficace.
Documentation pour .de défilement()
Documentation pour .scrollTop()
Si vous souhaitez afficher un div après avoir fait défiler un nombre de pixels,
sans jQuery:
Exemple De Travail
JS:
CSS:
HTML:
Documentation pour .scrollY
Documentation pour .className
Documentation pour .la méthode addEventListener
Si vous souhaitez afficher un élément, après le défilement vers elle:
Exemple De Travail
JS:
CSS:
HTML:
Notez que vous ne pouvez pas obtenir le décalage d'éléments de la valeur
display: none;
, prenez le décalage de l'élément parent à la place.Documentation pour .chacun()
Documentation pour .parent()
Documentation pour .offset()
Si vous voulez avoir une nav ou div bâton ou le dock en haut de la page une fois que vous faites défiler vers elle et décoller/détacher lorsque vous faites défiler vers haut:
Exemple De Travail
JS:
CSS:
HTML:
Vous avez un peu de choses qui s'y passent. L'un, pourquoi une classe? En effet, plusieurs de ces sur la page? Le CSS suggère que vous ne pouvez pas. Si non, vous devez utiliser un ID - c'est plus rapide de sélectionner à la fois en CSS et jQuery:
Deuxième vous avez un peu fou passe des choses en CSS - en particulier le z-index est censé être juste un numéro, ce n'est mesurée en pixels. Elle précise, en ce que la couche de cette balise est sur, où chaque nombre plus élevé est plus proche de l'utilisateur (ou mettre une autre manière, sur le haut de la/de l'occlusion des balises avec moins de z-index).
L'animation que vous essayez de faire est fondamentalement .fadeIn(), il suffit donc de définir la div en display: none; d'abord, et de l'utilisation .fadeIn() pour l'animer:
.fadeIn() fonctionne d'abord en faisant de l'affichage: (quel que soit l'affichage de la propriété est à la balise), opacity: 0, puis peu à peu l'escalade de l'opacité.
De travail complet exemple:
http://jsfiddle.net/b9chris/sMyfT/
CSS:
JS:
Vous pouvez aussi le faire.
Les BARRES de défilement &
$(window).scrollTop()
Ce que j'ai découvert, c'est que l'appel à des fonctionnalités telles que dans la solution, heureusement, fourni ci-dessus, (il y en a de nombreux autres exemples de cette tout au long de ce forum - qui fonctionnent tous très bien) n'est réussie que lorsque les barres de défilement sont vraiment visibles et d'exploitation.
Si (comme je l'ai peut-être bêtement essayé), vous souhaitez mettre en place une telle fonctionnalité, et vous souhaitez aussi, dirons-nous, de mettre en œuvre minimaliste "nettoyer l'écran sans barres de défilement, comme à cette discussion, puis
$(window).scrollTop()
ne fonctionnera pas.Il peut être une programmation fondamentale, mais j'ai pensé l'offrir à la les chefs à tous les collègues débutants, comme j'ai passé beaucoup de temps à essayer de comprendre cela.
Si quelqu'un pouvait vous offrir quelques conseils sur la manière de surmonter ce soit un peu plus de perspicacité, n'hésitez pas à répondre, comme je l'ai eu à recourir à afficher/masquer onmouseover/mouseleave au lieu ici
De vivre longtemps et de programme, CollyG.