#Bug!

You have a small bug in your code:

$.throttle(100, sectionScroll));

See it? You have one-too-many parentheses. This line should be:

$.throttle(100, sectionScroll);

#Debounce

You say in your title that the scrolling event is being fired too many times.

Well, this makes perfect sense: as long as the user has their mouse over the scroll bar and is moving the bar ever-so-slightly, the scroll event is going to try and fire as quick as it can.

Even for the tiniest movement, this event could fire over 50 times.

However, there is a simple way to prevent your code from trying to run that many times: a debounce.

A debounce is when you setup a variable to prevent code (typically an event) from running while another piece of code (often the same code) is still running.

Every time this scroll event fires, a new thread is going to be created with the event code running in it; a debounce would prevent these from running at the same time.

It is very simple to create a debounce; you just need a variable and a conditional.

Here is what the basic design would look like:

var debounce = true;
function foo() {
 if(debounce) {
 debounce = false;
 [code]
 debounce = true;
 }
}

The first line in the conditional would stop any other thread from running because they are all sharing a single debounce variable.

Now, all you need to do to apply this to your code would be to treat foo in the example as your sectionScroll function, create the debounce variable, and then encase the function code in the if statement.

Then, after adding the lines for setting and un-setting the debounce, you should be good to go.

The above is really the meat of my review, everything else is just miscellaneous.

#Indentation

You have none! Which, in my opinion, is better than having bad indentation.

Luckily for you there is a handy-dandy tool that you probably already know about: JSFiddle. At the very top of the page is a button labeled "TidyUp".

1. Paste your code into the "JavaScript" code box.
2. Give that "TidyUp" button a smack.
3. ???
4. Profit!

It's really as simple as that: using that "TidyUp" button will fully and properly indent your code.

However, don't get too used to this: you want to be able to tell right from wrong without having to consult something else.

Study the changes that that button made to your code. You may want to go back and forth a couple of times. And, read other JavaScript code that has proper indentation. Over time, you should be able to develop a strong sense of what is right, and what is wrong.

Note: I actually had to use this tool in order to review your code; I couldn't read it otherwise!

Bug!

You have a small bug in your code:

$.throttle(100, sectionScroll));

See it? You have one-too-many parentheses. This line should be:

$.throttle(100, sectionScroll);

Debounce

You say in your title that the scrolling event is being fired too many times.

Well, this makes perfect sense: as long as the user has their mouse over the scroll bar and is moving the bar ever-so-slightly, the scroll event is going to try and fire as quick as it can.

Even for the tiniest movement, this event could fire over 50 times.

However, there is a simple way to prevent your code from trying to run that many times: a debounce.

A debounce is when you setup a variable to prevent code (typically an event) from running while another piece of code (often the same code) is still running.

Every time this scroll event fires, a new thread is going to be created with the event code running in it; a debounce would prevent these from running at the same time.

It is very simple to create a debounce; you just need a variable and a conditional.

Here is what the basic design would look like:

var debounce = true;
function foo() {
 if(debounce) {
 debounce = false;
 [code]
 debounce = true;
 }
}

The first line in the conditional would stop any other thread from running because they are all sharing a single debounce variable.

Now, all you need to do to apply this to your code would be to treat foo in the example as your sectionScroll function, create the debounce variable, and then encase the function code in the if statement.

Then, after adding the lines for setting and un-setting the debounce, you should be good to go.

The above is really the meat of my review, everything else is just miscellaneous.

Indentation

You have none! Which, in my opinion, is better than having bad indentation.

Luckily for you there is a handy-dandy tool that you probably already know about: JSFiddle. At the very top of the page is a button labeled "TidyUp".

1. Paste your code into the "JavaScript" code box.
2. Give that "TidyUp" button a smack.
3. ???
4. Profit!

It's really as simple as that: using that "TidyUp" button will fully and properly indent your code.

However, don't get too used to this: you want to be able to tell right from wrong without having to consult something else.

Study the changes that that button made to your code. You may want to go back and forth a couple of times. And, read other JavaScript code that has proper indentation. Over time, you should be able to develop a strong sense of what is right, and what is wrong.

Note: I actually had to use this tool in order to review your code; I couldn't read it otherwise!