Entrez la description de l'image ici J'ai besoin de fixer / collant une div dans la version de bureau seul. Pas dans la version mobile. Fondamentalement, j'ai un site web ecommerce dans une page de produit unique que je souhaite corriger Ajouter au panier Pièce Sticky et les personnes défilantes, mais cette zone ne disparaîtra pas et que la partie fait défiler toujours par défilement de l'utilisateur, vous pouvez voir des images. Vous pouvez aller en utilisant ce lien https://letronne.com/products/example-product?variot=34631988379799
3 Réponses :
La solution dépend de la manière dont vous souhaitez détecter les appareils mobiles, une solution facile pourrait être @Media avec une résolution d'écran spécifique une position de réglage: fixe si elle correspond.
Une solution plus stable serait de déterminer l'agent utilisateur et de définir la position: fixe via JS / JQuery.
Jetez un coup d'oeil ici:
Quelle est la meilleure façon de détecter un appareil mobile? < / a>
Les requêtes de média ou autrement des méthodes impliquant l'écran Res sont préférées. UA renifler n'est pas une sécurité future car de nouveaux appareils sont libérés de temps en temps et que vous devriez constamment mettre à jour la reconnaissance du client.
Bonjour, vous pouvez le faire par JS.
@media all and (min-width: 1200px) {
.stickyclass {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0; //you need sticky at bottom use bottom:0
}
}
Il y a deux choses que vous devez faire. Tout d'abord, changez la position collante au père pour travailler (ici ne fonctionne pas comme vous le faites). Deuxièmement, utilise '@media (min-largeur: insertsizehere)' dans votre CSS pour effectuer un travail juste pour le bureau, comme celui-ci:
Ceci n'est pas fonctionné. J'ai essayé, et encore une fois j'ai fait, mais rien ne change tout fait défiler
Regarde à nouveau sur le site que vous donnez, je vois la div avec la classe "Produit-Single__Meta" a une position fixée dans le style, avec cela, vous n'avez pas besoin de la position collante. Juste la position fixe comme est là. Il suffit d'ajouter le @media dans ce style et êtes terminé.
Bienvenue à cela. Veuillez lire Comment poser une bonne question . En particulier, vous êtes censé montrer un effort et inclure un code dans la question