Sujet Précédent Sujet Suivant

Existe t il une div flottante ?

Résolu/Fermé
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 14 janv. 2022 à 23:50
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 - 15 janv. 2022 à 20:24
bonjour a tous

sur mon bon de commande fraichement réalisé je souhaiterais ajouter une div flottante

une div qui resterait par exemple dans le coin supérieur droit de mon écran en fixed et que quand je descends sur ma page cette div reste en place

j'ai tenté un truc avec une div fixed mais le soucis c'est que tout ce qui est a droite a hauteur de la div n'est plus cliquable

voici mon code actuel de cette partie qui est donc ma div fixed 

<header>
   <div class="header-navbar" >
      <div class="container">
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;margin-top:15px;border-left: 1rem solid;border-top: 1rem solid;border-right: 1rem solid;">Prix net
               <i id="prix_depart_haut"></i> euros
            </div>
         </div>
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Votre remise
               <i id="remise_haut"></i> euros
            </div>
         </div>
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Prix apres remise
               <i id="nouveau_prix_haut"></i> euros
            </div>
         </div>
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">
               <i id="livraison-detail_haut"></i>
            </div>
         </div>
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:15px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">frais fixe
               <i id="frais-fixe_haut"></i> euros
            </div>
         </div>
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="background-color: azure;text-align:right;font-size:20px;display: block;margin-left: auto;border-left: 1rem solid;border-right: 1rem solid;">Prix total
               <i id="nouveau_prix_total_haut"></i> euros
            </div>
         </div>
         <div class="row" >
            <div class="col-xl-9 col-lg-8 col-md-6  " style="">
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12 " style="padding-left: 5px;padding-right: 5px;background-color: beige;display: block;margin-left: auto;margin-bottom:15px;border-left: 1rem solid;border-right: 1rem solid;border-bottom: 1rem solid;">
               Nombre de produit(s) dans le panier : <i id="countart_haut"></i> 
               <a href="https://phil.pecheperle.be/test-commande-ok-v3.php#ancre" title="monsite">voir panier</a>
            </div>
         </div>
      </div>
   </div>
</header>


et le css 

         header{
   position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    /* margin-bottom: 60px; */
    float: left;
    max-width: 1600px;
}


un petit dessin c'est peut être mieux

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
Modifié le 15 janv. 2022 à 00:21
Bonjour 
max-width: 1600px

1600... Autant dire une grande partie de l'écran...(sur une grande majorité d'appareils)
Et puis, au lieu de mettre un header... Pourquoi ne pas simplement faire une div dimensionner grâce au class bootstrap ? Une div class col md 3 par exemple...

0
Réponse 2 / 7
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 15 janv. 2022 à 08:00
Bonjour jordane
Merci c ''est bien souvent les choses qui sont devant nos yeux que l 'on voit le plus difficilement

J'aurais une autre question
Comment masquer cette div a une certaine position lorsque je scrolle ma page vers le bas
si cela serait suivant la largeur de l écran je pourrais lui dire lorsque tu atteins une telle largeur tu masques la div

Mais sur un ordinateur de bureau comment faire pour que cette div disparaisse par exemple a hauteur de la div2

je viens de trouver ce morceau de code

mais cela ne semble pas fonctionner 

if(window.pageYOffset > 500) {
header.style.display = 'none';
}
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
15 janv. 2022 à 08:46
Ce bout de code n'est pas trop mal... Mais il manque le déclencheur...
Il faut le déclencher lors du Scroll sur ta page
0
Réponse 3 / 7
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
15 janv. 2022 à 08:47
Merci jordane et cela je peux le réaliser comment stp
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
15 janv. 2022 à 08:57
Tu ne cherches pas beaucoup....
https://www.w3schools.com/jquery/event_scroll.asp#:~:text=The%20scroll%20event%20occurs%20when,when%20a%20scroll%20event%20occurs.
0
Réponse 4 / 7
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
15 janv. 2022 à 09:12
Merci jordane
si j'ai trouve plusieurs exemple mais comme j'utilise boostrap 5
je pense que tu m avais dit que je ne pouvais plus utiliser
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
15 janv. 2022 à 09:14
Je ne t'ai pas dit que tu ne pourrais plus utiliser jquery
je t'ai dit que bootstrap5 ne l'utilise plus....

enfin bon.. ce qui existe en jquery existe en "pure" js ...
https://developer.mozilla.org/fr/docs/Web/API/Document/scroll_event
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
15 janv. 2022 à 09:17
ah ok
on s était mal compris alors

je regarde a cela tantot

un grand merci jordane pour les liens et l aide
0
Réponse 6 / 7
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
Modifié le 15 janv. 2022 à 09:44
j'ai trouve cet exemple

https://webdevdesigner.com/q/show-div-on-scrolldown-after-800px-41413/

avec le code suivant 

$(document).scroll(function(){
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.header').fadeIn();
  } else {
    $('.header').fadeOut();
  }
});


tu en penses quoi ?
0
Réponse 7 / 7
flexi2202 Messages postés 3784 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 30 mars 2024 179
15 janv. 2022 à 20:24
voila j'ai trouve enfin 
function showDiv(){
    if ($(window).scrollTop() < 1500) {
        $('.header-navbar').fadeIn('slow');
    } else {
        $('.header-navbar').fadeOut('slow');
    }//);
}
$(window).scroll(showDiv);
showDiv();
0

Discussions similaires

un périphérique qui n'existe pas a été spécifié
KyzeK -
Moi -

9 réponses
Partager annonce facebook MarketPlace - Cette annonce n’existe plus
mathieujo -
Zabel -

17 réponses
ymail.fr ça existe?
asb -
abbar -

8 réponses
comment contourner la fonction FILTRE
Gabby -
DjiDji59430 -

3 réponses
ymail.FR, ça existe?
asb -
latif -

3 réponses