Response title
This is preview!
Scroll combination problem snapscroll/scrollTop
in Using jQuery
•
6 years ago
Hello,
the website I'm making ( http://wannesverelst.netau.net/portfolio_fullscreen for the moment ) contains 2 normal means of navigation: clicking on the menu or scrolling. The difference is that when you scroll, you get a snapping effect. When you click on a menu you should obviously go to the corresponding div, but it just kinda jumps around.
The weird part is that when I implement the snapscroll effect OR the menu click, it works perfectly. The problem starts when I combine the 2 together.
The snapscroll plugin can be found at http://www.jqueryscript.net/layout/jQuery-Snap-Scrolling-Plugin-For-Single-Page-Website-snapscroll.html
The Click functionality is pretty standard,
-
$('#menu a').click(function(){
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('body').stop().animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
and there's also a part that changes the menu. I don't believe this is part of the problem, but just to be sure.
Any help to fix this would be awesome.
-
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.cl-effect-4 a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.cl-effect-4 li a').removeClass("active");
currLink.addClass("active");
$('.text').fadeOut('slow');
}
});
}
1