Positionner un div créer sur un valeur fixe à chaque scroll

Résolu/Fermé

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - Modifié le 17 avril 2019 à 12:26
rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 - 23 avril 2019 à 09:33

Bonjour,

J'ai un boutton qui permet de créer un div est j'aimerais que ce div soit créer sur un même position même à chaque scroll, voici mon code

function isShowen(elem){
            var $elem = $(elem);
            var $window = $("#mainContainer");
            var docViewTop = $window.scrollTop();
             elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();
         
           
        position_scroll_top= 200+$("#mainContainer").scrollTop();
               //la valeur 1300 correspond à la hauteur de chaque page
               if (position_scroll_top>1300) {
                position_scroll_top= 200+$('#mainContainer').scrollTop()-1300;
                position_scroll_top=position_scroll_top%1300;
                }
            return elemTop<= 75 && elemTop>= -1185;
        }

Avec ce code ça marche très bien mais le seul problème c'est que le div remonte toujours un peu à chaque scroll est elle finisse par disparaitre de l'affichage.

Est à ce que je vois j'ai fait un erreur de calcul, donc ce que je veux c'est un peu d'aide pour rectifier ce code pour que le div reste toujours sur sa position(comme sur la page 1) est que sa valeur reste intacte même à chaque scroll.
Cordialement,

A voir également:

Positionner un div créer sur un valeur fixe à chaque scroll
Créer un compte gmail - Guide
Créer un compte google - Guide
Créer un groupe whatsapp - Guide
Créer un compte instagram sur google - Guide
Créer un organigramme - Guide

2 réponses

Réponse 1 / 2

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
22 avril 2019 à 02:27

Salut, sache qu'il y a une solution simple et efficace à 100% en css grâce a position:sticky:

Je te passe le code d'une page, à toi de l'adapter :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>
<div>
<div style="background-color:red; border:4px solid orange; max-width:40%;margin-left:auto;margin-right:auto;position: -webkit-sticky;
position: sticky;
top: 40vh;text-align:center;padding:10px;">DIV</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu consectetur, congue magna nec, consequat lorem. Praesent accumsan ex vitae ex placerat lobortis. Curabitur porta scelerisque sagittis. Aenean vitae nulla nisi. In hac habitasse platea dictumst. Ut congue quam pulvinar, fermentum justo ut, ullamcorper libero. Cras sollicitudin interdum ex, et scelerisque enim condimentum id. Curabitur bibendum maximus orci. Praesent eget consectetur risus.
Nulla justo velit, faucibus eget sem quis, dictum scelerisque nisi. Etiam ac tellus dolor. Curabitur accumsan semper vulputate. Curabitur nec sollicitudin justo. Proin semper, lacus vitae faucibus blandit, risus nunc vehicula eros, at feugiat nisl dolor sed magna. Morbi laoreet ultricies ultrices. Donec interdum vestibulum metus, sit amet condimentum est condimentum nec. Duis sed molestie lectus. Nunc molestie tellus vestibulum iaculis sodales. In in porttitor nibh. Integer eu nisi aliquam elit consequat fermentum. Praesent imperdiet lacus tortor, vel iaculis ipsum facilisis ac.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum gravida ante in pulvinar pulvinar. Fusce convallis erat lorem, non viverra sem eleifend quis. Quisque suscipit lorem tortor, ut venenatis leo tincidunt egestas. Vestibulum facilisis rhoncus bibendum. Praesent tempor, magna sit amet accumsan tristique, eros est posuere arcu, et vestibulum enim elit a eros. Donec quis massa et metus fermentum luctus. Quisque finibus leo mi, vitae dignissim nisl suscipit at. Cras ut odio ultricies mi mollis efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi et ex in augue lobortis condimentum sit amet eget orci. Phasellus dolor enim, iaculis non mattis id, consectetur quis nibh. Vivamus quis nunc vel nisl condimentum congue. Sed nisl tortor, euismod eget elementum sed, tristique id justo. In quis magna eu elit pulvinar sagittis eu ut velit.
Pellentesque posuere commodo est et varius. Praesent ut feugiat arcu. In a condimentum tellus, quis consectetur leo. Donec tincidunt, est at rhoncus semper, metus est ultricies mauris, ac ullamcorper turpis magna id neque. Mauris venenatis sem eget neque molestie, et finibus nibh pretium. Nulla faucibus, nulla ac aliquet laoreet, dui libero consequat mi, a rutrum mi leo at elit. Nunc sodales rutrum dictum. Proin ex orci, pulvinar sit amet urna ut, vulputate dapibus mi. Phasellus tempor blandit purus ac tincidunt.
Sed vel vehicula erat. Ut nec turpis vitae tortor molestie ultrices. Suspendisse accumsan justo ac mi fringilla, eu efficitur nisi posuere. Suspendisse sodales nunc diam, non consequat libero egestas quis. Aliquam sit amet nisl ac nisi bibendum condimentum eget eu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris quam risus, lobortis id lacus sed, ultrices ultrices leo. Aliquam vulputate augue nisl, eget condimentum massa finibus vel. Mauris at purus ex. Aenean tincidunt luctus ligula. Mauris posuere ut dui ut ornare. Curabitur blandit eget turpis eu consequat. Nulla non risus eget ligula ornare auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu consectetur, congue magna nec, consequat lorem. Praesent accumsan ex vitae ex placerat lobortis. Curabitur porta scelerisque sagittis. Aenean vitae nulla nisi. In hac habitasse platea dictumst. Ut congue quam pulvinar, fermentum justo ut, ullamcorper libero. Cras sollicitudin interdum ex, et scelerisque enim condimentum id. Curabitur bibendum maximus orci. Praesent eget consectetur risus.
Nulla justo velit, faucibus eget sem quis, dictum scelerisque nisi. Etiam ac tellus dolor. Curabitur accumsan semper vulputate. Curabitur nec sollicitudin justo. Proin semper, lacus vitae faucibus blandit, risus nunc vehicula eros, at feugiat nisl dolor sed magna. Morbi laoreet ultricies ultrices. Donec interdum vestibulum metus, sit amet condimentum est condimentum nec. Duis sed molestie lectus. Nunc molestie tellus vestibulum iaculis sodales. In in porttitor nibh. Integer eu nisi aliquam elit consequat fermentum. Praesent imperdiet lacus tortor, vel iaculis ipsum facilisis ac.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum gravida ante in pulvinar pulvinar. Fusce convallis erat lorem, non viverra sem eleifend quis. Quisque suscipit lorem tortor, ut venenatis leo tincidunt egestas. Vestibulum facilisis rhoncus bibendum. Praesent tempor, magna sit amet accumsan tristique, eros est posuere arcu, et vestibulum enim elit a eros. Donec quis massa et metus fermentum luctus. Quisque finibus leo mi, vitae dignissim nisl suscipit at. Cras ut odio ultricies mi mollis efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi et ex in augue lobortis condimentum sit amet eget orci. Phasellus dolor enim, iaculis non mattis id, consectetur quis nibh. Vivamus quis nunc vel nisl condimentum congue. Sed nisl tortor, euismod eget elementum sed, tristique id justo. In quis magna eu elit pulvinar sagittis eu ut velit.
Pellentesque posuere commodo est et varius. Praesent ut feugiat arcu. In a condimentum tellus, quis consectetur leo. Donec tincidunt, est at rhoncus semper, metus est ultricies mauris, ac ullamcorper turpis magna id neque. Mauris venenatis sem eget neque molestie, et finibus nibh pretium. Nulla faucibus, nulla ac aliquet laoreet, dui libero consequat mi, a rutrum mi leo at elit. Nunc sodales rutrum dictum. Proin ex orci, pulvinar sit amet urna ut, vulputate dapibus mi. Phasellus tempor blandit purus ac tincidunt.
Sed vel vehicula erat. Ut nec turpis vitae tortor molestie ultrices. Suspendisse accumsan justo ac mi fringilla, eu efficitur nisi posuere. Suspendisse sodales nunc diam, non consequat libero egestas quis. Aliquam sit amet nisl ac nisi bibendum condimentum eget eu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris quam risus, lobortis id lacus sed, ultrices ultrices leo. Aliquam vulputate augue nisl, eget condimentum massa finibus vel. Mauris at purus ex. Aenean tincidunt luctus ligula. Mauris posuere ut dui ut ornare. Curabitur blandit eget turpis eu consequat. Nulla non risus eget ligula ornare auctor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu consectetur, congue magna nec, consequat lorem. Praesent accumsan ex vitae ex placerat lobortis. Curabitur porta scelerisque sagittis. Aenean vitae nulla nisi. In hac habitasse platea dictumst. Ut congue quam pulvinar, fermentum justo ut, ullamcorper libero. Cras sollicitudin interdum ex, et scelerisque enim condimentum id. Curabitur bibendum maximus orci. Praesent eget consectetur risus.
Nulla justo velit, faucibus eget sem quis, dictum scelerisque nisi. Etiam ac tellus dolor. Curabitur accumsan semper vulputate. Curabitur nec sollicitudin justo. Proin semper, lacus vitae faucibus blandit, risus nunc vehicula eros, at feugiat nisl dolor sed magna. Morbi laoreet ultricies ultrices. Donec interdum vestibulum metus, sit amet condimentum est condimentum nec. Duis sed molestie lectus. Nunc molestie tellus vestibulum iaculis sodales. In in porttitor nibh. Integer eu nisi aliquam elit consequat fermentum. Praesent imperdiet lacus tortor, vel iaculis ipsum facilisis ac.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum gravida ante in pulvinar pulvinar. Fusce convallis erat lorem, non viverra sem eleifend quis. Quisque suscipit lorem tortor, ut venenatis leo tincidunt egestas. Vestibulum facilisis rhoncus bibendum. Praesent tempor, magna sit amet accumsan tristique, eros est posuere arcu, et vestibulum enim elit a eros. Donec quis massa et metus fermentum luctus. Quisque finibus leo mi, vitae dignissim nisl suscipit at. Cras ut odio ultricies mi mollis efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi et ex in augue lobortis condimentum sit amet eget orci. Phasellus dolor enim, iaculis non mattis id, consectetur quis nibh. Vivamus quis nunc vel nisl condimentum congue. Sed nisl tortor, euismod eget elementum sed, tristique id justo. In quis magna eu elit pulvinar sagittis eu ut velit.
Pellentesque posuere commodo est et varius. Praesent ut feugiat arcu. In a condimentum tellus, quis consectetur leo. Donec tincidunt, est at rhoncus semper, metus est ultricies mauris, ac ullamcorper turpis magna id neque. Mauris venenatis sem eget neque molestie, et finibus nibh pretium. Nulla faucibus, nulla ac aliquet laoreet, dui libero consequat mi, a rutrum mi leo at elit. Nunc sodales rutrum dictum. Proin ex orci, pulvinar sit amet urna ut, vulputate dapibus mi. Phasellus tempor blandit purus ac tincidunt.
Sed vel vehicula erat. Ut nec turpis vitae tortor molestie ultrices. Suspendisse accumsan justo ac mi fringilla, eu efficitur nisi posuere. Suspendisse sodales nunc diam, non consequat libero egestas quis. Aliquam sit amet nisl ac nisi bibendum condimentum eget eu lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris quam risus, lobortis id lacus sed, ultrices ultrices leo. Aliquam vulputate augue nisl, eget condimentum massa finibus vel. Mauris at purus ex. Aenean tincidunt luctus ligula. Mauris posuere ut dui ut ornare. Curabitur blandit eget turpis eu consequat. Nulla non risus eget ligula ornare auctor.
</div>
</body>
</html>

Réponse 2 / 2

rasielblas Messages postés 140 Date d'inscription jeudi 20 mars 2014 Statut Membre Dernière intervention 12 mai 2021 9
23 avril 2019 à 09:33

C'est bien ce que je voulais, merci beaucoup pour votre aide! :-)

Cordialement,

Discussions similaires

créer une adresse gmail pour une autre personne

Discussions similaires

Newsletters