On my website, I have a sticky header as well as a sticky tab section. The particular section of that respective tabs when we scroll that section hides under the header and the sticky tabs, I have used Javascript to do this. I want the sections to appear just after the sticky tabs, which are now opening bit under the sticky tabs.

There is an issue with the height of the header and the sticky tabs.

I want the script in which the section will scroll wondering the heights of the header and the sticky tabs, so that it will be visible properly.

Below is the script which I have used.

//script for sticky section like tabs starts 

// Click event
     offset = 0;
         $('#primary-navwrapper li a[href^="#"]').click(function(event) {
     
             // Prevent from default action to intitiate
             event.preventDefault();
              
             //remove active from all anchor and add it to the clicked anchor
             $('#primary-navwrapper li a[href^="#"]').removeClass("active")
             $(this).addClass('active');
             
             // The id of the section we want to go to
             var anchorId = $(this).attr('href');
     
             // Our scroll target : the top position of the section that has the id referenced by our href
             var target = $(anchorId).offset().top - offset;
             console.log(target);
     
             $('html, body').stop().animate({ scrollTop: target }, 600, function () {
                 window.location.hash = anchorId;
             });
     
             return false;
         });
     
     //check the pages when scroll event occurs
     $(window).scroll(function(){
         // Get the current vertical position of the scroll bar
         position = $(this).scrollTop();
         $('#primary-navwrapper li a[href^="#"]').each(function(){
               var anchorId = $(this).attr('href'); 
                var target = $(anchorId).offset().top - offset;
                // check if the document has crossed the page
             console.log(position,target);
             if(position>=target){
                  //remove active from all anchor and add it to the clicked anchor
                 $('#primary-navwrapper li a[href^="#"]').removeClass("active")
                 $(this).addClass('active'); 
             }
         })
     })
     $(function(){
         //set our scroll state after dom ready
         $(window).scroll();
     })


//script for sticky section like tabs ends