Hi,

I building a one page website.
The menu on the left is floating on the page and after clicking on the link the page
smoothly scrolls to the selected page.
However I have a problem.
On the top of the page is a header.
Under the header is the menu. But if a user clicks on the menu item and the page scrolls down
the menu's position is lower than it should be because it's fixed with an top and left style.
I would like the menu to be at the top of the selected page except for the first page.
I hope I make myself clear.

Anyway here's the code:
The Javascript
Code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           var d = document.createElement("div");
		d.style.height = "101%";
		d.style.overflow = "hidden";
		document.body.appendChild(d);
		window.scrollTo(0,scrollToM);
		setTimeout(function() {
		d.parentNode.removeChild(d);
	        }, 10);
           return false;
         });
      }
    }
  });
});
</script>
and the HTML
HTML Code:
<ul>
			 <li><a href="#home">Home</a></li>
			 <li><a href="#about">About</a></li>
		 </ul>
<div id="page1">
			 <a id="home"></a>
				  <?php 
				  	$my_postid = 34;//This is page id or post id
					$content_post = get_post($my_postid);
					$content = $content_post->post_content;
					$content = apply_filters('the_content', $content);
					$content = str_replace(']]>', ']]>', $content);
					echo $content;
				  ?> 
		</div><!--END page1-->
		
		<div id="page2">
			 <a id="about"></a>
				  <?php 
				  	$my_postid = 37;//This is page id or post id
					$content_post = get_post($my_postid);
					$content = $content_post->post_content;
					$content = apply_filters('the_content', $content);
					$content = str_replace(']]>', ']]>', $content);
					echo $content;
				  ?> 
		</div><!--END page2-->
Note:
The page is build in WordPress. That's why the content of the page is load with PHP

M.