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.