We Keep Coding

On scroll the active menu does not chaning

I've created a right side menu but when i scrolling down it is not changing the active class to next menu,I've used this code lots of time but this time i'm not getting the result,
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
DEMO

you need to define scrollLink and you can give some animation effect when you click an anchor link by adding a function like this
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
Demo : http://jsfiddle.net/3xmop98u/

I think you are missing var scrollLink = $('.myanimate'); in your code. Adding this line in your DEMO make the code work.
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
var scrollLink = $('.myanimate');
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 70;
if ( sectionOffset <= scrollbarLocation ) {
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive');
}
});
});
$(".myanimate").click(function (){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 2000);
});

Poor Javascript and JQuery performance

I am experiencing extreme lag issues with my javascript code. Especially parallaxing is very slow. I expect that this results from multiple executions of the functions. Here is my code:
function tada() {
$(".arrow").addClass("tada");
setTimeout(function () {
$(".arrow").removeClass("tada");
}, 1000);
}
var j = 0;
function thumb() {
if(j < 18) {
setInterval(function () {
$('.equip-thumb').eq(j).css('opacity', '1');
j++;
}, 100);
}
}
$(document).ready(function(){
for (var i = 0; i < 18; i++) {
var color = "#1b1f25";
if ((i%3) === 0) {
color = "#1b222c";
}
if ((i%3) === 1) {
color = "#171c23";
}
if ((i%3) === 2) {
color = "#2a313b";
}
$('.equip-thumb').eq(i).css("background-color", color);
}
});
var fired = 0;
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wHeight = $(this).height();
$(".arrow").css({
'opacity' : 1-wScroll/wHeight/0.5
});
$("#splash").css({
'transform' : 'translate(-'+ wScroll /10 +'% , 0px)',
'opacity' : 1-wScroll/wHeight/0.5
});
if(wScroll > ($('.section-equipment').offset().top - 0.6*wHeight)) {
if (fired === 0) {
fired = 1;
thumb();
}
}
});
$(function() {
setInterval(function () {
tada();
}, 4000);
$('.equip-thumb').on({
mouseover: function(){
$(this).children().css('transform', 'translate(0px, 0px)');
},
mouseleave: function() {
$(this).children().css('transform', 'translate(0px, 100%)');
},
click: function(){
$(this).siblings().children().css('transform', 'translate(0px, 100%)');
$(this).children().css('transform', 'translate(0px, 0px)');
}
});
$('#portfolio-a').click(function (){
$('html, body').animate({
scrollTop: $('.section-portfolio').offset().top - 65
}, 1000);
});
$('#equipment-a').click(function (){
$('html, body').animate({
scrollTop: $('.section-equipment').offset().top - 65
}, 1000);
});
$('#contact-a').click(function (){
$('html, body').animate({
scrollTop: $('.section-contact').offset().top - 65
}, 1000);
});
});
How could I improve it?

You should contemplate using requestAnimationFrame for animation, as the browser will invoke your callback before each repaint, thus it's a better guarantee that animations will be in sync with your monitor's refresh rate, Also, some browsers will make optimisations which ultimately result in more performant code.
Aside from the answers surrounding your use of setInterval, your scroll event callback could be wrapped in an invocation of requestAnimationFrame:
$(window).scroll(function () {
requestAnimationFrame(function (lastUpdate) {
var wScroll = $(this).scrollTop();
var wHeight = $(this).height();
$(".arrow").css({
'opacity' : 1-wScroll/wHeight/0.5
});
});
});
The lastUpdate parameter is a timestamp representing when queued callbacks begin to fire, so you could even use this to throttle your logic.

The code below will run forever. Because j < 18 initially, it will execute the setInterval function. However, there is nothing that is stopping the function from ending. Therefore, you are executing $('.equip-thumb').eq(j).css('opacity', '1') 10 times a second forever!
setInterval(function () {
$('.equip-thumb').eq(j).css('opacity', '1');
j++;
}, 100);
In order to fix this, you should create a for loop instead (to keep things simple) and use setTimeout instead of setInterval. I hope this helps!

Using lodash updatePosition not working

Hello So I am using lodash for the first time. My jquery code keeps jumping and I am trying to migrate it in the lodash function but I don't really understand how.
IDK if this matter but the main idea behind the code is for a div to scroll down to a position and snap to place but it keeps jumping. please advise !!
$(window).on('scroll', _.throttle(updatePosition, 100));
$(window).on('scroll', function(){
var scroll = $(window).scrollTop();
var sectionPosTop = document.getElementById('header-bamboo-scroll').getBoundingClientRect();
var headerHeight = document.getElementById('header').getBoundingClientRect();
if (scroll >= 660 && scroll <= 680 ) {
console.log('greater than 660 and less than 680');
$('html, body').animate({
scrollTop: headerHeight.height
}, 500, function() {
$('html, body').stop();
});
}
});
});

I don't understand exactly what you want to do, but you can to use _.throttle to get a delay between code execution and that can give you a smooth animation. You can to adjust the delay time (in milliseconds) to get what you want.
var updatePosition = function() {
var scroll = $(window).scrollTop();
var sectionPosTop = document.getElementById('header-bamboo-scroll').getBoundingClientRect();
var headerHeight = document.getElementById('header').getBoundingClientRect();
if (scroll >= 660 && scroll <= 680 ) {
console.log('greater than 660 and less than 680');
$('html, body').animate({
scrollTop: headerHeight.height
}, 500, function() {
$('html, body').stop();
});
}
}
$(window).on('scroll', _.throttle(updatePosition, 100));

jQuery animate callback with promise still fires too early

I scroll my homepage back up if the logo in my menu is clicked. I also have a listener on $(window).scroll() which animates an object out of the screen with a negative margin.
My problem is that this event gets triggered with the animation (animate scrollTop).
This shouldn't occur because I have a boolean variable which has to be true to do this, I only set this on true AFTER the scroll animation using a combination of .promise() and .done().
This is my JavaScript:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500).promise().done(resetFirstScroll());
});
});
var resetFirstScroll = function() {
firstscroll=true;
}
A solution would be to give the function a setTimeout of 50 milliseconds, but I'd rather do it correctly after the animation is completed.
Using the standard callback gives the same output:
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
resetFirstScroll();
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}

For those who want the "hacky" solution:
var firstscroll=true;
$(function(){
var captionWidth= $(".caption").children().size() * 35;
$(".caption").width(captionWidth);
$(window).scroll(function() {
if(firstscroll){
$(".hidden-menu").removeClass("hidden-menu", {duration:500});
$('.header').animate({
marginTop: $('.header').height() * -1
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500);
firstscroll = false;
}
});
$(".menu-logo, .logo-container").click(function(){
$('.header').animate({
marginTop: 0
}, 500);
$('html, body').animate({
scrollTop: 0
}, 500, function() {
setTimeout( resetFirstScroll, 50 );
});
});
});
var resetFirstScroll = function() {
firstscroll=true;
}

Delay mousewheel function

I'm using the mousewheel and waypoints plugin to scroll sections of my page; The problem I am having is when I scroll using the apple mighty mouse the scrolling is too sensitive and the function gets triggered more then once when the animation is complete. I tried to set a timeout function and variable to check if the animation is complete but neither of these worked.
I would like to replicate an effect similar to the one on this website.
JQUERY
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
clearTimeout(interval);
console.log('test');
$('section').waypoint(function(direction){
thisID = $(this);
},{ offset: '350' });
indexPos = thisID.index('section');
if (completed == true) {
completed = false;
var interval = "";
if (delta > 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
//$(this).animate(function(){
$('html, body').stop().animate({
scrollTop: thisID.prev().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
//});
}else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
else if (delta < 0) {
interval = setTimeout(function(){
if ($(this).not(":first-child")) {
$('html, body').stop().animate({
scrollTop: thisID.next().offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
else {
$('html, body').stop().animate({
scrollTop: thisID.offset().top - 200
}, 1000, 'swing' , function() { completed = true; });
}
},400);
}
};
return false; // prevent default
});

I don't know what this is doing: indexPos = thisID.index('section'); but before doing anything, I would check if ins't anything in progress already:
$('body').mousewheel(function(event, delta, deltaX, deltaY) {
if($('html').is(':animated') || $('body').is(':animated')) return false;
// else, do your stuff...
});

You can use underscore js http://underscorejs.org/
and do something like this:
$('body').mousewheel(_.debounce(function() {
//handle the mouse wheel event in here
}, 30)
This will wait for 30 ms from the last mousewheel event before firing the callback

This website doesn't seem to use scrolling. It merely moves to a new anchor (watch the url when scrolling) which is triggered by moving (scrolling) your mouse up or down as a trigger which feels like lagged scrolling (but in fact, you don't have any control over the direction once it moves). You can use jquery animate to do that.