We Keep Coding

Adding class to the section once the section reach the top of the window

I am facing challenges in once the section reaches the top of the window that section add one class, anyone has the answer please share with me.

You're looking for a scrollSpy, Bootstrap has one built in you could easily implement without having to reinvent the wheel.
In short, the solution lies within comparing the window.scrollTop to the position of the element you are interested in. This usually has top and an offsetX which you can use to calculate how far up you are in the viewport.

with jquery you can code like this :
$(document).ready(function () {
$(window).scroll(function() {
var scroll_top = $(document).scrollTop();
var element_offset_top = $('#mainFooter').offset().top;
if (scroll_top >= element_offset_top) {
$('#mainFooter').addClass('classname');
} else {
$('#mainFooter').removeClass('classname');
}
});
});
I used element with id="mainFooter" for this example code. also "classname" is your desired class name.

Responsive sliding on click

You guys already helped me out a lot, I hope you can help me with this question to.
This is my website so far: http://stilld.nl/test/
Everything is working pretty good (need to do a lot of tidying up in my code though).
Please scroll down to the portfolio part. Click an item and the details appear beneath the portfolio. PERFECT!
PROBLEM: size you browser down to mobile format. Click a portfolio item. it doesn't scroll down far enough, because my portfolio items are now displayed beneath each other. They take up much more vertical space now!
WHAT I WANT: Is there a way to make code responsive? So something like: if screen size is smaller then 600 px THEN slide down 500px on click.
This is the code I'm using right now:
$(document).ready(function(){
$(".portfolio").click(function () {
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});
});

You should calculate the offset with either jQuery's .offset() or jQuery's .position().
What you could do for example is:
$(".portfolio").click(function () {
var offSetTarget = $('.description').position().top;
var scrollExtra = 0;
$('body').animate({
scrollTop: offSetTarget + scrollExtra
}, 600);
});
Where you can determine how much extra you want to scroll.
For example if you want to scroll just above the .portfolio, you can add: scrollExtra = -10; . Or if you want to scroll halfway, you could do: scrollExtra = $('.portfolio').height()/2;
I prepared a working example for you HERE.
To prove that it actually works, you can play with the window size here.
I hope that answers your question. Good luck!
Update
To implement it into your example, we would have to determine where to scroll to.
For illustrational purposes, I have chosen to do this with the divs #alldescriptions and #port_img1 in this example.
The jQuery for your website would then be:
$(document).ready(function() {
$(".portfolio").click(function () {
var offSetTarget = $('#alldescriptions').position().top;
var scrollExtra = 0;
if ($('#'+$(this).attr('target')).is(':visible')){
$('#'+$(this).attr('target')).slideUp();
} else {
$('.description').slideUp();
$('#'+$(this).attr('target')).slideDown();
$('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
}
});
$(".close").click(function () {
$('.description').slideUp();
$('body').animate({scrollTop: $('#port_img1').position().top }, 600);
});
});
Again, mind you that you can alter the exact scrolling location by giving var scrollExtra a different value.
You can find an implementation of this code here and a live fullscreen example here.
Please play around with the window size again so you can see it actually works with every screensize. Good luck!

You could detect the inner width of the screen and then set variables for the offset.
if(window.innerWidth <= 600) {
var offSet = 500;}
else{
var offSet = 600;}
Then replace this in your code:
$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, offSet);
BUT.... if you want to simplify your code, you could use CSS Transitions. Then just use jQuery to add and remove a class that triggers the Transition, using media querys to change the offset. It would also have less overhead.

Highlighting the element after scrolling to it

Here is the fiddle I'm working with: http://jsfiddle.net/fz5Yk/5/
As you can see, it has a one-page scrolling navigation. I want to achieve a highlighting effect (preferably using .animate function) to the headings in <strong> </strong> tags when scrolling to a section. Just scroll the page manually and you will see a highlighting in the navigation menu; item of the scrolled section, but I can't quite resolve the js codes in order to apply the same to the headings, and an intervention in it with .animate function seems much more difficult to me. Can you help me?

The plugin-page seems well-documented; https://github.com/davist11/jQuery-One-Page-Nav.
Just put an animation on the location you scroll to inside the end: definition;
$('#nav').onePageNav({
end: function() {
//I get fired when the animation is ending
}
});
Test update
$(window).scroll(function() {
var visible_start = window.pageYOffset;
var window_height = window.innerHeight;
var section3_height = $('#section-3').height();
var section3_start = $('#section-3')[0].offsetTop;
if ((visible_start - window_height >= section3_start) &&
$('#section-3').css('background-color', 'yellow');
}
});

Make element scroll slower (Parallax)

I have an element on my page absolutely positioned.
Im trying to write a snippet of jQuery to make that element scroll at a slower rate than the rest of the elements on the page.
I've written this so far but cannot seem to get it too work at all. Has anybody experience with this and if so would you care explaining?
$(document).ready(function() {
$window = $(window);
$('.twit-bird').css({
'top' : -($('window')/3)+"px"
});
});
I've also tried to add an anchor, a fixed div at the top of my window to work out the calcs from that with no luck...
also tried this
$(document).ready(function() {
// Cache the Window object
windowScroll = $(this).scrollTop();
$(window).scroll(function() {
$('.twit-bird').css({
'top' : -(windowScroll/3)+"px"
});
});
});

I can point you in the right direction. You need your $('.twit-bird').css() to get called every time the window is scrolled. Also you forgot .scrollTop(), and don't quote window (or, even better just use this) ...
$(window).scroll(function () {
$('.twit-bird').css({
'top' : -($(this).scrollTop()/3)+"px"
});
});

Here is a very very good tutorial for parallax scrolling. It made me understanding how it really works.

create a div that would grow as if it is a bubble

I have a circular background image inside a div. to start off with i need to not have the 'bubbles' to display. and after arriving on that page the bubble would grow into place like a bubble or in other words 'pop' into place. I have no idea how i would go about creating this in jquery. this also needs to work on all browsers including ie7+ any help would be grateful

jQuery show() function
jQuery animate
These should give you an idea.
You might also consider using images to illustrate what you're trying to achieve.
I recommend building the content you need, and then asking people how you can change it to get the results you want. That will be easier for people to answer.

For the popping effect you really need to animate 4 different styles, depending on your CSS preference you can animate top and left or if you're using margins (why?) margin-top and margin-left, this will give you the effect of the "bubble" expanding center outwards instead of top left to bottom right.
This is a jQuery example for top/left
var newHeight = 300;
var newWidth = 300;
jQuery('#element').animate({
"top":newHeight/2,
"left":newWidth/2,
"height":newHeight,
"width":newWidth,
"opacity":1
}, 'fast', easeInOutCirc);
You may find the easing effects here: http://gsgd.co.uk/sandbox/jquery/easing/
its worth noting you should be a little more specific with your questions, we're not mind readers :)

This is a simplified version of this fiddle where I did something very similar to what you're doing. Hope it helps.
function(){
var position = $('#bubbleposition'),
bubble = $('#bubble'),
startRadius = 200,
newRadius = 400,
startleft = 10,
starttop = 10,
endleft = 50,
endtop = 50;
position.css({left: startleft, top: starttop, 10)});
bubble.css({height: startRadius, width: startRadius});
position.animate({left: endleft, top: endtop});
bubble.animate({height: newRadius, width: newRadius}, 400);
}
<div id='bubbleposition'>
<div id='bubble'>
Hello!
</div>
</div>