/*$(document).ready(function() { 
    $("#topBar").css("position", "absolute"); 
}); 
$(window).scroll(function() { 
    $("#topBar").css("top", $(window).scrollTop() + "px"); 
})*/
$(window).resize(function(event) {
		var leftHeader=parseFloat(($(window).width()-980)/2);
	   $('header').css('left',leftHeader+'px');

});

$(document).ready(function(){
	$('header').css('position','fixed');
		var leftHeader=parseFloat(($(window).width()-980)/2);
	   $('header').css('left',leftHeader+'px');
$('a[href=#webdesign]').addClass('actif');
  //var top = $('header').offset().top - parseFloat($('header').css('marginTop').replace(/auto/, 0));
  var web=0;
  var illu=1200;
  var photo=2800;
  //alert(leftHeader);
  $(window).scroll(function (event) {
	// $('header').css('top', $(this).scrollTop() + "px");
    // what the y position of the scroll is
   var y = $(this).scrollTop();
	
	
  if(y<illu){
	$('a[href=#webdesign]').addClass('actif');
  }else{
	  $('a[href=#webdesign]').removeClass('actif');
  }
  
    if((y>=illu)&&(y<photo)){
	$('a[href=#illustration]').addClass('actif');
  }else{
	  $('a[href=#illustration]').removeClass('actif');
  }
  
      if(y>=photo){
	$('a[href=#photo]').addClass('actif');
  }else{
	  $('a[href=#photo]').removeClass('actif');
  }
  
    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      //$('header').addClass('fixed');

	 
    } else {
      // otherwise remove it
     // $('header').removeClass('fixed');
    }
  });



	$('a[href=#webdesign]').click(function(){
		$('html, body').animate({ scrollTop: 0 }, 'slow');
		return false;
	});
$('a[href=#illustration]').click(function(){
		$('html, body').animate({ scrollTop: 1600 }, 'slow');
		return false;
	});
	$('a[href=#photo]').click(function(){
		$('html, body').animate({ scrollTop: 3200 }, 'slow');
		return false;
	});
})