Conflit entre deux scripts
Bonjour à tous.
Voilà, je dev actuellement un petit site pour une assoc', et j'y intègre deux scripts jQuery, l'un pour effectuer un scroll vertical au clic sur un bouton et pour fixer ma navbar lorsque je dépasse un certain point dans la page, et l'autre pour faire slider mes divs au scroll descendant.
Seulement voilà, la navbar reste fixée en haut tout le temps une fois que j'ai atteint le bas de la page, alors qu'elle devrait se fixer puis s'enlever selon que je remonte ou pas. Lorsque je désactive le plugin de slide, cela fonctionne bien, il doit donc y avoir un petit conflit entre les deux.
Help?
Cordialement.
Navbar:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
$(document).ready(function() {
var navpos = $('#navo').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#navo').addClass('navbar navbar-inverse navbar-fixed-top');
}
else {
$('#navo').removeClass('navbar navbar-inverse navbar-fixed-top');
}
});
$('.scrollTo').click( function() {
var page = $(this).attr('href');
var speed = 1200;
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
return false;
});
}); |
Slide:
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemOffset = 0;
if(elem.data('offset') != undefined) {
elemOffset = elem.data('offset');
}
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
if(elemOffset != 0) { // custom offset is updated based on scrolling direction
if(docViewTop - elemTop >= 0) {
// scrolling up from bottom
elemTop = $(elem).offset().top + elemOffset;
} else {
// scrolling down from top
elemBottom = elemTop + $(elem).height() - elemOffset
}
}
if((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) {
// once an element is visible exchange the classes
$(elem).removeClass('notViewed').addClass('viewed');
var animElemsLeft = $('.animBlock.notViewed').length;
if(animElemsLeft == 0){
// with no animated elements left debind the scroll event
$(window).off('scroll');
}
}
}
$(document).ready(function() {
var $blocks = $('.animBlock.notViewed');
var $window = $(window);
$window.on('scroll', function(e){
$blocks.each(function(i,elem){
if($(this).hasClass('viewed'))
return;
isScrolledIntoView($(this));
});
});
}); |