What im trying to do is to make headers sticky (fixed) when they are 'top: 72px'. Before they become sticky they are absolute. When a new header is approaching the sticky header, eg. when the new header is 150px below the sticky header id like the sticky header to become absolute and when the new header is top 72 

 id like the new one to become the sticky.

By trial and error i managed to this, but as all posts differ in height it only worked for the 2 first, then everything got of set.  What i did was to add  line 24 and 25 and '-200' on line 33.

best

 

2. function stickyTitles(stickies) {
3. 
   
4.     this.load = function() {
5. 
   
6.         stickies.each(function(){
7. 
   
8.             var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
9. 
   
10.             jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
11. 
    
12.         });
13.     }
14. 
    
15.     this.scroll = function() {
16. 
    
17.         stickies.each(function(i){
18. 
    
19. 
    
20.             var thisSticky = jQuery(this),
21.                 nextSticky = stickies.eq(i+1),
22.                 prevSticky = stickies.eq(i-1),
23.                 pos = jQuery.data(thisSticky[0], 'pos');
24. var diff = -23;
25. var differ = 201;
26. 
    
27. 
    
28.             if (pos + diff <= jQuery(window).scrollTop()) {
29. 
    
30.                 thisSticky.addClass("fixed");
31.                 if (nextSticky.length  > 0 && thisSticky.offset().top + differ  >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {
32. 
    
33.                     thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()-200);
34. 
    
35.                 }
36. 
    
37.             } else {
38. 
    
39.                 thisSticky.removeClass("fixed");
40. 
    
41.                 if (prevSticky.length > 0 && jQuery(window).scrollTop() + differ<= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {
42. 
    
43.                     prevSticky.removeClass("absolute").removeAttr("style");
44. 
    
45.                 }
46. 
    
47.             }
48.         });         
49.     }
50. }
51. 
    
52. jQuery(document).ready(function(){
53. 
    
54.     var newStickies = new stickyTitles(jQuery(".pagnering"));
55. 
    
56.     newStickies.load();
57. 
    
58.     jQuery(window).on("scroll", function() {
59. 
    
60.         newStickies.scroll();
61. 
    
62.     }); 
63. });

2.     .pagnering {
3. margin-top: 72px;
4.         position: absolute;
5.     }
6.     .pagnering.fixed {
7.         position: fixed;
8.         width: 99.6%;
9.         z-index: 0;
10.         top: 0px;
11.     }
12.     .pagnering.fixed.absolute {
13.         position: absolute;
14.     }