Discussion :

[MelGrn]

Bonjour à tous !

Je suis nouvelle sur ce forum, donc j'espère poser ma question au bon endroit !

Je rencontre un problème, je suis actuellement en stage pour créer un site web, et je souhaiterai que mes divs présentent sur le côté descendent au fur et à mesures que les utilisateurs descendent la page, mais celui-ci dépasse le footer..

Alors je sais qu'il y a pleins de sujets à ce propos, mais j'ai tout essayé et chez moi rien ne marche.

Que dois-je utiliser ? CSS , JS ? Je ne sais plus..

Voici mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 <div id="flotter"  style=" margin-top: 25%; background-color: rgba(255, 158, 64, 0.8); border-radius: 3%; height: 180px; margin-left: 2%; margin-right: 0%;">
 
			<h4> PROJETS PROFESSIONELS ET PARTICULIERS </h4> 
			<p> Vous pouvez observer : </p>
			<a href="realisations.html" style="color:white; margin-left: 20%;"> &rsaquo; Nos activités </a><br />
			<a href="realisations.html" style="color:white; margin-left: 20%;"> &rsaquo; Nos réalisations </a><br />
			<a href="realisations.html" style="color:white; margin-left: 20%;"> &rsaquo; Nos ressources </a>
 
		</div>

Et mon de code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 #flotter { position: absolute;
               top: 10px;
               left: 0px;
               width: 200px;
               text-align: center;  }

Merci pour votre attention, et votre aide, bonne journée !

[Invité]

Bonjour et bienvenue sur DVP,

voici un plugin qui pourrait t'intéresser : http://stickyjs.com

[MelGrn]

Bonjour jreaux62, merci pour ta réponse.

Je ne comprends pas tellement comment procéder, j'ai téléchargé le plugin, mais comment dois-je m'en servir où est-ce que je met les fichiers ?

[SpaceFrog]

sinon un position fixed ?

[devyan]

Bonjour,

Pas besoin de Javascript pour faire cela, le CSS position:fixed fait le travail tout seul

EDIT : Oups! désolé pour le doublon

[Invité]

...que mes divs présentent sur le côté descendent au fur et à mesures que les utilisateurs descendent la page, mais celui-ci dépasse le footer.....

Pour te fournir une réponse précise, il faudrait mieux expliquer ce que tu veux faire.

+ une copie d'écran, pour montrer le problème.

Car cette question peut se traiter de différentes manières, en fonction du contexte.

Par exemple, il est possible d'utiliser en CSS position :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

position:sticky; /* Attention : expérimental ! */

expérimental = éviter de l'utiliser

D'où le plugin proposé.

N.B. position:fixed; , c'est bien gentil, mais quand la "boite" est plus haute que la fenêtre, une partie sera inaccessible...

[MelGrn]

Merci tout le monde.

En effet, j'ai essayé la position " fixed " mais le problème c'est que la div se déplace dès le haut, moi je souhaiterai qu'elle se deplace à partir du moment ou le scroll l'atteind.

Voici la photo de mon site :



Et une photo lorsque je met la position fixed :



Et le code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 #flotter { position: fixed;
               top: 10px;
               left: 0px;
               width: 200px;
               text-align: center; 
               border: 1px solid green;
               background-color:white; }

[Invité]

As-tu essayé le code du plugin ?

ici, il faut adapter les chemins relatifs (j'ai supposé que les fichiers sont dans un dossier "sticky")

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<script src="sticky/jquery.js"></script>
<script src="sticky/jquery.sticky.js"></script>
 
<script>
  $(document).ready(function(){
    $("#flotter").sticky({topSpacing:0});
  });
</script>

[MelGrn]

Cela ne marche pas.

Je ne comprends pas comment utiliser le plugin, je dois mettre quels fichiers ? Dans quel dossier ?

J'ai télécharge le dossier sticky, où il se trouve des fichiers .json .

Je dois mettre ces fichiers dans le dossier de mon site, en plus d'écrire le code JS que tu viens de me donner ?

[Invité]

Oui.

Et mettre dans le code les chemins relatifs vers les fichiers : "jquery.js" et "jquery.sticky.js".

Tu n'as jamais inclus un fichier js (ou autre) dans une page ?


N.B. Supprime tous les border-radius du CSS (arrondis) : ce n'est plus du tout "tendance"...

[SpaceFrog]

Avec un poil d'imagination...
https://jsfiddle.net/f9ezyk06/

[MelGrn]

J'aurais certainement dû préciser, que je ne suis qu'en 1ère année en BTS info, et vraiment pas très douée

Pour le plugin cela ne marche toujours pas....


SpaceFrog, j'ai essayé ton code, mais la div "screen" je dois la mettre où ?

[SpaceFrog]

Peu importe, c'est juste un exemple ...

il suffit d'écouter le scroll de window et modifier le position fixed de ton objet en conséquence

[MelGrn]

Dans mon cas, rien a changé

[SpaceFrog]

Encore faudrait-il que tu comprennes ce que j'ai suggéré et que tu l'adaptes à ton code ...

tu ecoutes le scroll du window ?
tu modifies une classe ?
tu utilises jquery ?

[danielhagnoul]

Oui.

Et mettre dans le code les chemins relatifs vers les fichiers : "jquery.js" et "jquery.sticky.js".

Tu n'as jamais inclus un fichier js (ou autre) dans une page ?

Serveur de code :

1. "https://code.jquery.com/jquery-2.2.4.min.js"
2. "https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.3/jquery.sticky.min.js"

Par rapport au bas de la page : $( '#sticker' ).sticky( { 'bottomSpacing' : 0 } ); // https://github.com/garand/sticky.

[MelGrn]

Comment on écoute le scroll ?

[SpaceFrog]

Dans mon exemple c'est fait avec jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(window).on('scroll', function(){

[MelGrn]

Oui,oui j'ai repris votre code, mais ça ne marche pas

[Invité]

mais ça ne marche pas

Ce n'est pas avec ça qu'on va pouvoir t'aider.

1/ Le minimum est de montrer ton code !

2/ Le plus simple à faire est aussi de réaliser une page TEST, simple, juste pour TESTER ce qu'on te propose