Bonsoir,
Je suis actuellement sur un projet de création de site et je bloque sur un point.
J'ai un sous-menu, qui grâce au javascript, me permet de le fixer une fois qu'il arrive en haut de la page, et de mettre une classe .active sur la page en cours, ainsi que de faire de belles transitions lorsqu'on switch de sous-menu. Le seul problème est que ça marche très bien, sauf sur IE...
Je me pose donc la question: Est-ce possible de le faire sur IE ? Ou dois-je faire une structure à part pour IE ? Merci d'avance pour votre aide.
Voici le code :
Modifié par flox (21 Nov 2016 - 23:54)
Je suis actuellement sur un projet de création de site et je bloque sur un point.
J'ai un sous-menu, qui grâce au javascript, me permet de le fixer une fois qu'il arrive en haut de la page, et de mettre une classe .active sur la page en cours, ainsi que de faire de belles transitions lorsqu'on switch de sous-menu. Le seul problème est que ça marche très bien, sauf sur IE...
Je me pose donc la question: Est-ce possible de le faire sur IE ? Ou dois-je faire une structure à part pour IE ? Merci d'avance pour votre aide.
Voici le code :
<nav class="sous-menu">
<ul id="ul">
<li><a href="#section1">Présentation</a></li>
<li><a href="#section2">Nos projets</a></li>
<li><a href="#section3">Les membres</a></li>
</ul>
</nav>
.fixed {
position:fixed;
top:50px;
border-top:solid .1em white;
}
.active {
color:#25a0c2;
font-weight:bold;
}
/* Transition et classe active */
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
nav = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#ul a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
/* Fixé le sous-menu */
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$(".sous-menu").addClass("fixed");
} else {
$(".sous-menu").removeClass("fixed");
}
});
Modifié par flox (21 Nov 2016 - 23:54)