Ok supporter avec moi, je sais que cela aurait peut-être été posé plusieurs fois, mais je ne peux pas obtenir la réponse exacte après avoir cherché un peu.
Ce que je veux, c'est que l'utilisateur commence à faire défiler vers le bas, après un certaine hauteur la div disparaît .. et il reste disparu jusqu'à ce que l'utilisateur commence à faire défiler. Droit lorsque l'utilisateur commence à faire défiler, la DIV apparaît à nouveau. J'ai besoin d'une sorte d'effets fondue pour cela aussi.
C'est ce que j'ai trouvé en regardant d'autres réponses jusqu'à présent. Avec cela, la DIV disparaît après une certaine hauteur lorsque vous faites défiler vers le bas, mais cela ne ressort que lorsque vous atteignez cette même hauteur lorsque vous faites défiler. Je veux que la div puisse se montrer immédiatement lorsque l'utilisateur commence à faire défiler. Ce code n'a aucune animation ...
3 Réponses :
Je ne suis pas le plus grand artiste jquyery non plus, mais je pense que cela devrait fonctionner: vous pouvez voir J'ai fait des mises à jour sur votre demande dans un violon: http://jsfiddle.net/gm46n/2/ . Vous pouvez voir dans la partie JS du violon que j'ai fabriqué deux options - une est avec Voici le JS mis à jour: P> myPOS code> est mis à jour chaque fois que l'utilisateur fait défiler l'utilisateur. , haut ou bas. p> Modifier h1>
.fadein () code> et .fadeout () code> (ce temps fonctionne - Sur votre site, le code que j'ai fourni n'est pas en cours d'exécution), le second utilise .slidetoggle () code>. p> var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
newscroll = mywindow.scrollTop();
if (newscroll > mypos && !up) {
$('.header').stop().slideToggle();
up = !up;
console.log(up);
} else if(newscroll < mypos && up) {
$('.header').stop().slideToggle();
up = !up;
}
mypos = newscroll;
});
Cela fonctionne parfaitement. Comment allais-je ajouter des effets de disparition / disparition de FADE in / FADE OUT? Actuellement il apparaît ou disparaît. Est-il possible pour moi d'aimer l'amener du haut, puis quand il disparaît, il vous enlève-toi en allant au sommet? (Ceci est un menu) au fait.
Actuellement, vous utilisez .Fadein () et fadeout () . Pour faire ce que vous désirez, il y a plusieurs options que vous pouvez utiliser .slidetoggle () , vérifiez le lien pour l'effet. Cela semble un peu bizarre parfois, alors si vous voulez simplement que cela glisse dans son intégralité et non «Déplier» comme le .slidetoggle () fait, ce que j'utilise est TOP: "10PX"}); .
Vous devriez me montrer quelques exemples incorporés dans la réponse. J'ai essayé .Animate et il faut qu'il est temps de vous déplacer comme vous faites défiler, je pense que c'est à cause de la façon dont vous utilisez la position de défilement et mettez à jour la variable chaque fois que l'utilisateur fait défiler l'utilisateur.
Puisque vous avez déjà du code, pourriez-vous s'il vous plaît s'il vous plaît montrer ou la mettre dans un Jsfiddle ? Cela me ferait beaucoup plus facile pour moi de jouer avec et de comprendre ce que vous voulez.
Je ne l'ai pas entièrement utilisé, mais vous pouvez le voir ici: phanime.com la façon dont le menu se déplace.
Dans votre jsfiddle, cela fonctionne bien. Cependant, une fois que je l'ai mis en œuvre sur le site, que vous pouvez voir que l'animation n'est pas du tout fluide, en fait, je peux à peine voir l'animation du tout.
Je ne sais pas comment se fait, votre FPS va bien, donc ce n'est pas le problème. Néanmoins, je dois dire que le code de votre site est assez chaotique. Certains fichiers JS vous incluez au sommet, d'autres en bas, dites simplement que ce n'est pas une bonne pratique. Pour un correctif - je pense que c'est juste très à forte intensité de navigateur, vous avez des dizaines de scripts JS ici et là ... Si vous tapez jQuery ('. Phanimebar'). Animate (({TOP: '1000PX'}) ; dans la console de votre navigateur, vous pouvez le voir bouger, mais pas aussi lisse. Peut-être que d'autres choses JS sont le hogging - je n'ai aucune idée ...
Où ferais-je mettre ce code 'jquery ('. Phanimebar '). Animate ((((((top:' 1000px '});' En ce qui concerne l'original? En ce qui concerne le nettoyage du code JQuery, serait-il préférable de les mettre dans fichier .js et appelez-le dans l'en-tête? Actuellement, je viens de le mettre dans les fichiers .php
Je ne sais pas quel navigateur votre utilisation de votre utilisation, mais en chrome presse Cntrl + Maj + j, accédez à la console -Tab et entrez le code là-bas. Idéalement, mettez tout .CSS -Files dans l'en-tête et tous les .js -Files et autres JavaScript juste au-dessus . Faire cela, le JS est uniquement chargé une fois que tous les éléments sont chargés, de sorte que vous n'avez pas besoin de jQuery (document) .Ready (fonction (fonctionnaire () {// myCode ici . Utilisation du PagesPeed L'outil J'ai analysé votre site et marque un 50/100 . Exécution de l'outil Vous pouvez voir où votre site peut être amélioré. Néanmoins étrange que fps semble ok ..
Vous pouvez essayer
J'ai utilisé votre code, il suffit de remplacer .slidetoggle () avec .fadein et .fadeout et il a fonctionné super.
Une option serait de stocker la valeur
.scrolltop () dans un VAR supplémentaire. Ensuite, lorsqu'il est défilé, vérifiez si le nouveau.scrolltop () est supérieur ou inférieur à la valeur stockée et faites les choses en conséquence et stockez la nouvelle valeur.Seul problème est que je ne suis pas trop grand avec JQuery.
jQuery (this) .scrolltop ()> 0 ?? et quand pensez-vous que votre ScrollTop sera inférieur à0J'ai répondu à une question similaire ici: Stackoverflow.com/questions/17870659/... avec un Petite modification pour la fondue Vous avez ceci: Jsfiddle.net/frz9J/3
@jerrylow Cela semble fonctionner, cependant, si je fais défiler un peu, puis remonter la barre disparaisse effectivement mais ne ressemble pas à nouveau.