Div qui suit le scroll
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..
Je tiens à préciser que je suis une débutante, mais je tiens à réussir ceci!
Voici mon code HTML :
Code :
Merci pour votre attention, et votre aide, bonne journée ! :)
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..
Je tiens à préciser que je suis une débutante, mais je tiens à réussir ceci!
Voici mon code HTML :
Code :
<div class="conteneur3" style="margin-left: 80%; margin-right: 2%; margin-top: 17.5%;" >
<div id="getScrolled" style="background-color: rgba(255, 158, 64, 0.8); margin-top: -155%; border-radius: 5%;" >
<br />
<p style="letter-spacing:0.1em; margin-left:15%; font-size:16px; margin-top: -2%;"> <font style="font-weight:bold; "> TTPM SARL </font><br />
Z.I LE MONT <br />
23200 Aubusson
</p><br />
<p style="margin-left:7%; letter-spacing:0.2em; margin-top: -1%;">
<font style="font-weight:bold;">☎ Téléphone : </font> 05-55-66-10-97 <br /><br />
<font style="font-weight:bold;">📠 Fax :</font> 05-55-66-34-58<br /><br />
<font style="font-weight:bold;">✉ Mail :</font> contact@ttpm23.com
</p>
</div>
</div>
Merci pour votre attention, et votre aide, bonne journée ! :)
2 réponses
-
Serait il possible de voir la déclaration de ton footer ?? il y a de multiples résolutions de ton problème sur openclassrooms comme ce lien
https://openclassrooms.com/forum/sujet/body-qui-depasse-90526
-
Mon footer :
<footer style="margin-top: 34%;">
Copyright TTPM Aubusson
<a href="mentions.php"> Mentions légales </a>
</footer>
Merci pour le lien, je vais aller jeter un oeil.
Cela fait 5 jours que je suis bloquée dessus, j'ai fais tous les sites, et je n'ai toujours pas résolu mon problème :/
EDIT : Je viens de tester quelque chose
Script :<script>
var positionElementInPage = $('#flot').offset().top;
$( window ).resize(function() {
positionElementInPage = $('#flot').offset().top;
});
$(window).scroll(
function() {
if ($(window).scrollTop() > positionElementInPage) {
// fixed
$('#flot').addClass("fixedTop");
} else {
// unfixed
$('#flot').removeClass("fixedTop");
}
}
);
css :<style>
#menu{
text-align: center;
font-size: 35px;
}
.fixedTop{
position: fixed;
top:0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
HTML :
<div id="flot" style="background-color: rgba(255, 158, 64, 0.8); margin-top: -845%; border-radius: 5%; ">
<br />
<p style="letter-spacing:0.1em; margin-left:15%; font-size:16px; margin-top: -2%;"> <font style="font-weight:bold; "> TTPM SARL </font><br />
Z.I LE MONT <br />
23200 Aubusson
</p><br />
<p style="margin-left:7%; letter-spacing:0.2em; margin-top:-1%;">
<font style="font-weight:bold;">☎ Téléphone : </font> 05-55-66-10-97 <br /><br />
<font style="font-weight:bold;">📠 Fax :</font> 05-55-66-34-58<br /><br />
<font style="font-weight:bold;">✉ Mail :</font> contact@ttpm23.com
</p>
</div>
Mais ma div disparait lorsque le scroll arrive a son niveau :/
