Menu

Probleme Menu sticky

Messages postés
113
Date d'inscription
lundi 5 octobre 2015
Dernière intervention
13 janvier 2019
-
Bonjour,

Etant débutant en javascript, je dois créer un portfolio et j'ai eu comme idée de mettre ma barre de navigation en bas et lorsque je parcours mon site la barre de navigation remonte en haut.
J'ai une fonction qui permet que ma barre de navigation s'adapte a l'ecran mais ma deuxieme fonction qui scroll ne fonctionne pas. Je vous montre le code.

Merci d'avance pour votre aide.

Voici ma page d'accueil (Site one page)


Ma page index
<div class="bgimg-1">
  <div class="caption">
      <!-- Nom et prenom -->
  <span class="border">Chris Dimoke GHENDA
      Etudiant DUT Informatique
  </span>

<!-- Barre de navigation -->
<div class="topnav" id="myTopnav">
    <div id="navscoll">
  <a href="#home">Accueil</a>
  <a href="#news">A propos</a>
  <a href="#contact">Compétences</a>
  <a href="#about">Experiences</a>
  <a href="#about">Portfolio</a>
  <a href="#about">Hobbies</a>
  <a href="#about">Contact</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
</div>

  </div>
</div>


Ma page en CSS ( Tout n'est pas encore commenté)

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

/* Position des images */
.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.bgimg-1 {
  background-image: url("images/bart.jpg");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("img_parallax2.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("img_parallax3.jpg");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}


.caption span.border {
  border: double #000000;
  color: #000000;
  padding: 30px;
  font-size: 30px;
  letter-spacing: 5px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
  text-align:center;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}
/* Barre de navigation */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width:100%;
  text-align:center;
  z-index:2;
}

.topnav a {
  float: none;
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Pour le bloc a propos*/
.apropos{
    color: #777;
    background-color:white;
    text-align:center;
    padding:50px 80px;
    text-align: justify;
    z-index:1;
}

/* Pour le bloc competences*/
.competences{
    color: #777;
    background-color:white;
    text-align:center;
    padding:50px 80px;
    text-align: justify;
    z-index:1;
}



.sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f4511e;
}





Et mon fichier JS
/* Fonction pour que la barre de navigation s'adapte a l'ecran */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

/* fonction permettant que la barre de navigation reste fixed lorsque
on parcourt la page*/
window.onscroll = function() {functionscroll()};

var navscoll = document.getElementById("navscoll");
var sticky = navscoll.offsetTop;

function functionscroll() {
  if (window.pageYOffset >= sticky) {
    navscoll.classList.add("sticky")
  } else {
    navscoll.classList.remove("sticky");
  }
}
Afficher la suite 

Votre réponse

1 réponse

Messages postés
24107
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 janvier 2019
2147
0
Merci
Bonjour
As tu vérifié si tu n'avais pas de messages d'erreur dans la console ?
As tu essayé de voir quelles valeurs prennent tes variables (en faisant des console.log par exemple) ?
Et essayer de voir si tu entres bien dans la fonction ? et dans le if ?

Anonymous95340
Messages postés
113
Date d'inscription
lundi 5 octobre 2015
Dernière intervention
13 janvier 2019
-
Bonjour,

Je viens de vérifier. Sur console, la variable navscroll prend la valeur de l'Id dans ma div et la variable sticky ne prend rien cela me retourne zéro...
Lorsque je scroll ma page, ma barre de navigation remonte directement en haut mais ne redescend pas
Anonymous95340
Messages postés
113
Date d'inscription
lundi 5 octobre 2015
Dernière intervention
13 janvier 2019
-
up please
Commenter la réponse de jordane45