Forum : Problème avec sticky menu (stickUp a jQuery plugin)

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

je cherche à créer un "menu collant" . Mais comme je n'y connais rien en javascript, j'ai utiliser ce plugin: https://lirancohen.github.io/stickUp/

voici mon code html:

<!DOCTYPE html>
<html>
  <head>
    <title>DypriX - Accueil</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../script/script.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="../js/stickUp.min.js"></script>
  </head>
  <body>
    <div class="menu">
      <div class="logomenu">
        <a href="index.php"><img src="../img/logotype.png"><p>DypriX</p></a>
      </div>
       <a href="index.php" class="link active">Accueil</a><a href="#" class="link">Portfolio</a><a href="#" class="link">WuWDev</a><a href="#" class="link">Contact</a>
    </div>
    <div class="section1">
      <h1>DypriX</h1>
      <h2>Qui suis-je?</h2>
      <p>Je suis Youtuber et Développeur Web.<br />
<br />
En ce qui concerne YouTube, mon contenu est principalement tourné<br />
Gaming ainsi que la culutre de YouTube en général. Sur ma chaîne, vous<br />
 pourrez retrouver du Gaming sur des jeux sandbox tel que Minecraft<br />
ou Garry’s Mod, des vidéos sur des jeux XBOX ONE, et bien plus encore!<br />
<br />
En ce qui concerne le développement web, vous pourrez retrouver toute les<br />
informations dans la partie “Portfolio” de mon site web.</p>
      <img src="../img/logotype.png">
    </div>
    <div class="section2">
      <h2>Qu’y a-t-il sur ce site web?</h2>
      <div class="infos">
      <img src="../img/informations.png">
      <h3>Des informations</h3>
      <h4>Sur moi et mes vidéos<h4>
      </div>
      <div class="portfolio">
      <img src="../img/portfolio.png">
      <h3>Un Portfolio</h3>
      <h4>Avec toute mes création web</h4>
      </div>
      <div class="contact">
      <img src="../img/contact.png">
      <h3>Des moyens de contact</h3>
      <h4>Pour pouvoir me contacter en toute circonstances</h4>
      </div>
    </div>
    <div class="section3">
      <h2>Ma dernière vidéo</h2>
      <p>Bonjour à tous!
On se retrouve enfin pour le renouveau de ma chaîne que je vous<br /> annonce depuis
 un moment déjà! Je vous prépare du (très) lourd!<br >

la chaîne d'thox Colaboy: https://www.youtube.com/user/wildesyde</p>
<iframe class="youtube" width="560" height="315" src="https://www.youtube.com/embed/VQTOAVUpZg0" frameborder="0" allowfullscreen></iframe>
    </div>
    <footer>
      <h4><font color="white">© DypriX 2016. Tous droits réservés.</font></h4>
      <a href="#"><img src="../img/icon twitter.png" class="icontwitter"></a>
      <a href="#"><img src="../img/icon youtube.png" class="iconyoutube"></a>
    </footer>
  </body>
  <script type="text/javascript">
              //initiating jQuery
              jQuery(function($) {
                $(document).ready( function() {
                  //enabling stickUp on the '.menu' class
                  $('.menu').stickUp();
                });
              });

            </script>
</html>

voici mon code css:

@font-face {
    font-family: "MYRIADPRO";
    src: url('../font/MYRIADPRO-REGULAR.OTF');
}
@font-face {
    font-family: "Roboto";
    src: url('../font/Roboto-Light_0.ttf');
}
@font-face {
    font-family: "Robotoita";
    src: url('../font/Roboto-LightItalic_0.ttf');
}
@font-face {
    font-family: "Robotoreg";
    src: url('../font/Roboto-Regular_0.ttf');
}
body
{
  height: 1845px;
  width: 1600px;
}

.menu
{
  position: sticky;
  background-color: white;
  width: 100%;
  box-sizing:border-box;
}

.menu .link
{
width: 500px;
position: relative;
left: 1375px;
top: -55px;
}

.menu img
{
height: 75px;
width: 75px;
}

.menu p
{
  position: absolute;
  top: 0px;
  left: 75px;
  font-family: "MYRIADPRO";
font-size: 25px;
}

.link
{
  font-family: "MYRIADPRO";
font-size: 25px;
color: black;
padding: 20px;
transition-duration: 0.2s;
}
.link:hover, .link.active
{
color: #8e44ad;
}

a
{
  text-decoration: none;
  color: black;
}

a:hover
{
  color: #8e44ad;
  transition-duration: 0.2s;
}

.section1
{
  position: absolute;
  height: 500px;
  width: 1903px;
  top: auto;
  background-color: #9b59b6;
  left: 0px;
}

.section1 img
{
  height: 500px;
  width: 500px;
  position: absolute;
  left: 1400px;
  top: -35px;
}

.section1 h1
{
  position: absolute;
  font-family: "Roboto";
font-size: 100px;
font-weight: normal;
left: 800px;
top: -75px;
}

.section1 h2
{
  position: absolute;
  font-family: "Robotoita";
font-size: 50px;
font-weight: normal;
left: 400px;
top: 80px;
}

.section1 p
{
  position: absolute;
  font-family: "Roboto";
  font-size: 25px;
  left: 300px;
  top: 190px;

}

.section2
{
  position: absolute;
  height: 500px;
  width: 1903px;
  top: 615px;
  background-color: #ecf0f1;
  left: 0px;
}

h2
{
  position: absolute;
  font-family: "Robotoita";
font-size: 50px;
font-weight: normal;
}

h3
{
  position: absolute;
  font-family: "Robotoreg";
  font-size: 25px;
  font-weight: normal;
}

h4
{
  position: absolute;
  font-family: "Robotoita";
  font-size: 25px;
  font-weight: normal;
}

.section2 h2
{
  top: 10px;
  left: 600px;
}

.infos img
{
  position: absolute;
  top: 175px;
  left: 300px;
}

.infos h3
{
  position: absolute;
  top: 325px;
  left: 285px;
}

.infos h4
{
  position: absolute;
  top: 375px;
  left: 265px;
}

.portfolio img
{
  position: absolute;
  top: 175px;
  left: 800px;
}

.portfolio h3
{
  position: absolute;
  top: 325px;
  left: 810px;
}

.portfolio h4
{
  position: absolute;
  top: 375px;
  left: 725px;
}

.contact img
{
  position: absolute;
  top: 175px;
  left: 1300px;
}

.contact h3
{
  position: absolute;
  top: 325px;
  left: 1255px;
}

.contact h4
{
  position: absolute;
  top: 375px;
  left: 1125px;
}

.section2 img:hover
{
  width: 150px;
  height: 150px;
}

.section3
{
  position: absolute;
  height: 500px;
  width: 1903px;
  top: 1115px;
  background-color: #bdc3c7;
  left: 0px;
}

.section3 p
{
  position: absolute;
  font-family: "Roboto";
  font-size: 25px;
  top: 200px;
}

.section3 h2
{
  left: 600px;
}

.section3 p
{
  left: 100px;
}

.section3 .youtube
{
  position: absolute;
  left: 1200px;
  top: 100px;
}

footer
{
  position: absolute;
  height: 250px;
  width: 1903px;
  background-color: black;
  left: 0px;
  top: 1615px;
}

footer img
{
  position: absolute;
  height: 50px;
  width: 50px;
  background-color: black;
  top: 100px;
}

.icontwitter
{
  left: 1600px;
}

.iconyoutube
{
  left: 1500px;
}

footer h4
{
  top: 75px;
}

footer img:hover
{
  width: 60px;
  height: 60px;
}

et pour finir, voici le code js du plugin:

jQuery(function($){$(document).ready(function(){var contentButton = [];var contentTop = [];var content = [];var lastScrollTop = 0;var scrollDir = '';var itemClass = '';var itemHover = '';var menuSize = null;var stickyHeight = 0;var stickyMarginB = 0;var currentMarginT = 0;var topMargin = 0;$(window).scroll(function(event){var st = $(this).scrollTop();if (st > lastScrollTop){scrollDir = 'down';} else {scrollDir = 'up';}lastScrollTop = st;});$.fn.stickUp = function( options ) {$(this).addClass('stuckMenu');var objn = 0;if(options != null) {for(var o in options.parts) {if (options.parts.hasOwnProperty(o)){content[objn] = options.parts[objn];objn++;}}if(objn == 0) {console.log('error:needs arguments');}itemClass = options.itemClass;itemHover = options.itemHover;if(options.topMargin != null) {if(options.topMargin == 'auto') {topMargin = parseInt($('.stuckMenu').css('margin-top'));} else {if(isNaN(options.topMargin) && options.topMargin.search("px") > 0){topMargin = parseInt(options.topMargin.replace("px",""));} else if(!isNaN(parseInt(options.topMargin))) {topMargin = parseInt(options.topMargin);} else {console.log("incorrect argument, ignored.");topMargin = 0;} }} else {topMargin = 0;}menuSize = $('.'+itemClass).size();}stickyHeight = parseInt($(this).height());stickyMarginB = parseInt($(this).css('margin-bottom'));currentMarginT = parseInt($(this).next().closest('div').css('margin-top'));vartop = parseInt($(this).offset().top);};$(document).on('scroll', function() {varscroll = parseInt($(document).scrollTop());if(menuSize != null){for(var i=0;i < menuSize;i++){contentTop[i] = $('#'+content[i]+'').offset().top;function bottomView(i) {contentView = $('#'+content[i]+'').height()*.4;testView = contentTop[i] - contentView;if(varscroll > testView){$('.'+itemClass).removeClass(itemHover);$('.'+itemClass+':eq('+i+')').addClass(itemHover);} else if(varscroll < 50){$('.'+itemClass).removeClass(itemHover);$('.'+itemClass+':eq(0)').addClass(itemHover);}}if(scrollDir == 'down' && varscroll > contentTop[i]-50 && varscroll < contentTop[i]+50) {$('.'+itemClass).removeClass(itemHover);$('.'+itemClass+':eq('+i+')').addClass(itemHover);}if(scrollDir == 'up') {bottomView(i);}}}if(vartop < varscroll + topMargin){$('.stuckMenu').addClass('isStuck');$('.stuckMenu').next().closest('div').css({'margin-top': stickyHeight + stickyMarginB + currentMarginT + 'px'}, 10);$('.stuckMenu').css("position","fixed");$('.isStuck').css({top: '0px'}, 10, function(){});};if(varscroll + topMargin < vartop){$('.stuckMenu').removeClass('isStuck');$('.stuckMenu').next().closest('div').css({'margin-top': currentMarginT + 'px'}, 10);$('.stuckMenu').css("position","relative");};});});});

Ce que je veux

Comme je l'ai dit plus haut, je cherche à faire un menus collant.

Ce que j'obtiens

Le menus est bien collant, ça fonctionne. Mais malheureseument, il passe "en dessous" des 3 section et non pas par dessus comme attendu.
Je vous met le dossier du site : https://mega.nz/#!2YAxFZgb

si il y a besoin d'une clés de déchiffrement: !2fQ9XRbXc4qi0TYuijjZfCLo1g7zp4hIqifnc-0Nm3c

Pouvez-vous m'aider svp? Je suis débutant en code.

Benjamin Derepas

Réponse acceptée

il passe "en dessous" des 3 section et non pas par dessus comme attendu.

Peut être est ce un problème de z-index ? Avec un z-index sur ton menu supérieur au reste du site, tu devrai corriger ce problème

Lartak

Tu dois avoir une erreur dans la console de l'inspecteur de ton navigateur, car tu fais un lien vers le fichier script.js qui serait dans le dossier script, sauf que ce dossier n'existe pas (tout du moins dans les sources que tu partages).
Commences donc par corriger ceci.

DarkSnake

Auteur

Le fichier script.js est jute vierge. Et ce n'est pas ça qui va régler mon problème. mais bon je corrige quand même ^^

Grafikart

Tu pourrais "rendre" la page et mettre une démo sur un site comme jsfiddle pour qu'on puisse voir le truc en live sans trop galérer ?

DarkSnake

Auteur

Je vais l'héberger sur un hébergeur gratuit car jsfiddle ne prend pas en compte les images etc...

DarkSnake

Auteur

voilà: http://dyprix.hol.es/index.html

Grafikart

Dans ton css je ne vois pas de margin:0; padding:0; sur ton body http://dyprix.hol.es/style.css

Benjamin Derepas

A noté que la propriété position:sticky n'est pour le moment connu que par Firefox comme on le vois sur caniuse .
Si je peux te donner un conseil :

construire ton menu normalement
créer une class (exemple : is-sticky) en css le mettant en position fixed
- créer un evenement au scroll, qui lorsque ce dernier dépasse x pixels, ajouter la class is-sticky' à ton élément

Problème avec sticky menu (stickUp a jQuery plugin)

Ce que je fais

Ce que je veux

Ce que j'obtiens

8 réponses