Bonjour, j'ai un soucis avec le Javascript j'ai crée un script avec le tuto de w3school comment faire un sticky navbar et j'ai un problème le sticky navbar cache le header(photos ci-joint) après le scroll,pouvez vous m'aider svp je vous passe le code php,css et js. l'effet sticky se fait avec css et js regarder dans le css, les derniers codes du css c'est le code pour le sticky.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test #1 - Le Site Web</title>
<link rel="stylesheet" href="/a/CSS/style.css"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id ="header-navbar">
<header>
<h1>Test #1</h1>
</header>
<nav>
<ul>
<li><a href="/a/PHP/test.php">Accueil</a></li>
<li><a href="/a/index.html">Qui suis-je ?</a></li>
<li><a href="/a/PHP/index.php">Livre d'or</a></li>
</ul>
</nav>
</div>
<div class="main_content">
<section>
<aside>
<h1>Objectif du site</h1>
<p>Ce site a pour bute unique d'etre un exemple de site fait par moi, un projet de portfolio </p>
</aside>
<article>
<h1>Bienvenue sur mon site de stockage de donnée</h1>
<p>Sur ce site je stockerai des données superficiels qui serviront d'exemple,<br>
comme c'est mon premier site sur mon nouveau PC j'ai vais mettre tous mes connaissances<br>
sur ce site pour garder en mémoire mon niveau et pouvoir montrer mon "level" aux autres.</p>
</article>
</section>
<?php
try
{
$bdd = new PDO("mysql:host=localhost;dbname=test;charset=utf8",
"root", "", array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
$reponse = $bdd->query('SELECT * FROM jeux_video');
// On affiche chaque entrée une à une
while ($donnees = $reponse->fetch())
{
?>
<p>
<strong>Jeu</strong> : <?php echo $donnees['nom']; ?><br />
Le possesseur de ce jeu est : <?php echo $donnees['possesseur']; ?>, et il le vend à <?php echo $donnees['prix']; ?> euros !<br />
Ce jeu fonctionne sur <?php echo $donnees['console']; ?> et on peut y jouer à <?php echo $donnees['nbre_joueurs_max']; ?> au maximum<br />
<?php echo $donnees['possesseur']; ?> a laissé ces commentaires sur <?php echo $donnees['nom']; ?> : <em><?php echo $donnees['commentaires']; ?></em>
</p>
<?php
}
$reponse->closeCursor(); // Termine le traitement de la requête
?>
</div>
<footer>
<p>Copyright 2018 Reezy - Tous droits réservés <br />
<br /> <a class="contact" href="mailto:samynantoy@gmail.com">Me contacter</a></p>
<a class="sitemap" href="\a\Sitemap.xml">Site Map</a>
</footer>
<script src="/a/Scripts/main.js"></script>
</body>
</html>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("header-navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Windows et Linux sont les meilleurs OS pour un informaticien.
tu veux pas qu il s affiche quand tu es en haut de la page？en js, tu peux modifier le moment ou ton sticky apparait, tu peux rajouter une marge pour tester, a ta variable var sticky tu rajoutes 1％ par exemple de la height de ta page （window）.
En faite après avoir scroller, quand en remonte le sticky prend toute la place, ce que je voudrais c'est que tous redeviens comme au debut, je n'ai pas compris ou tu veux que je mette 1% a var sticky parce que var sticky c'est dans le JS je ne pense pas que je pourrais mettre un height dans le code JS
Windows et Linux sont les meilleurs OS pour un informaticien.
En faite, il faut que ajoute ta classe sticky au moment ou ton $(window).scrollTop() est supérieur à la taille de ton header, et vice versa pour l'enlever
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
Sa ne marche pas j'ai mis le code dans mon fichier js j'ai remplacer le code qui ressemble avec celui la mais ya rien qui se passe , j'ai aussi mis en plus sans remplacer avec l'ancien code sa donne rien
Windows et Linux sont les meilleurs OS pour un informaticien.
Et hésite pas à chercher un peu avec les bons mots sur google, sans forcément copier coller tout ce qu'on te donne et en comprenant surtout ce qu'on te donne, c'est uniquement un conseil
- Edité par Damien.O 19 novembre 2018 à 15:22:29
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
Tu copies colle le code à la fin de ton script main, ou juste après son appel. Après la si tu y arrives pas, je peux plus rien pour toi, reprends les cours de js depuis le départ.
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
Finalement j'ai abandonner parce que sa me casser la tete que sa marche pas je suis en train actuellement de chercher un autre script JS pour faire des sticky navbar sur le net merci pour ton aide
Windows et Linux sont les meilleurs OS pour un informaticien.
Sa marche tjrs pas bon j'ai abondonner ce script je vais travailler avec un autre
- Edité par samyn-antoy 20 novembre 2018 à 11:29:28
Windows et Linux sont les meilleurs OS pour un informaticien.
[Sticky navbar] probleme avec l'affichage
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------