I'm using smooth scrolling anchor links in a sticky header that is fixed to the top of the page when it scrolls to the top of the screen, otherwise it is positioned statically on the page.

The problem I'm having is the anchor links in the sticky header (the header being static at this stage) when clicked scroll you down correctly but ignore the offset on the page (offset being placed so it compensated for the height of the fixed header), scrolling you past the desired content. This doesn't happen when the .sticky class is applied and the links are clicked when the header is fixed. Anyone any thoughts on how to fix this?

The code I'm using for the sticky header and smooth scrolling is as follows:

2.       var move = function () {
3.         var st = $(window).scrollTop();
4.         var ot = $("#scroller-anchor").offset().top - 139;
5.         var s = $("#scroller");
6.         if (st > ot) {
7.           s.addClass('sticky').offset().top - 139;
8.         } else {
9.           if (st <= ot) {
10.             s.removeClass('sticky');
11.           }
12.         }
13.       };
14.       $(window).scroll(move);
15.       move();
16.     });
17.     $(document).ready(function () {
18.       var headerHeight = $("div#scroller").height();
19.       $('a[href*=#]:not([href=#])').click(function () {
20.         if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
21.             || location.hostname == this.hostname) {
22.           var target = $(this.hash);
23.           target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
24.           if (target.length) {
25.             $('html,body').animate({ scrollTop: target.offset().top - 170 }, 1500 );
26.           }
27.           $('html,body').animate({ scrollTop: target.offset().top - 170 }, 1500);
28.         }
29.       });
30.     });

Any help you be very much appreciated!