Sticky Content Slider

Talha Aziz

Why Choose Coastline for Mexico
Contract Manufacturing?

  • Manufacturing Capabilities
  • Manufacturing Solutions
  • The Coastline Difference

Manufacturing Capabilities

Some examples of manufacturing capabilities include:

  • Finished Device Assembly
  • Manual Assembly of Components & Subassemblies
  • Box-build & Mechanical Assembly
  • Secondary Manufacturing Processes
  • Electronics Assembly Processes
  • Micro Assembly / High-power Magnification
  • Cleanroom Assembly & Packaging
  • Soldering (IPC standard)
  • Custom Battery Pack Assembly
  • Cable Harness Assembly
  • Program Management
  • Lean Manufacturing Principles
  • Sterile-barrier Packaging
  • Solvent bonding
  • UV Curing & EFD Adhesive Processes
  • Ultrasonic Welding
  • RF Welding (Radio Frequency)
  • Friction Fit (press-fit) Assembly
  • Textiles & Soft Goods Sewing
  • Thermoforming
  • Die Cutting (Clicker Press)
  • Hot Stamping
  • ESD Control Procedures
  • Product Labeling & Label Printing (lot traceability)
  • Engineering Services & Validation Activities
  • Process Qualifications
  • Sterilization (contract) & Sterilization Management
  • Automated Assembly Processes
  • Tooling and fixture development
  • Inspection Services
  • Metrology: Optical Measure System (OMM)
  • Pull Testing, Leak Testing, Flow Testing
  • Form-Fill-Seal (FFS) Packaging
  • Import-Export & Customs Expertise
  • Procurement & Logistics
  • Materials Management
  • NPI: Manufacturing Transfer Management
  • Automation & Semi-Automated Processes

Manufacturing Solutions

Contract manufacturing in Mexico can provide a number of benefits. Working with Coastline to outsource your manufacturing needs to our Tijuana, Mexico facilities will allow you to optimize your domestic business operations. With Coastline, nearshore contract manufacturing operations in Mexico will give you the ability to:

  • Reduce labor costs
  • Immediately increase capacity to scale manufacturing
  • Focus on design, development, product innovation
  • Eliminate in-house production challenges by using contract manufacturers
  • Optimize speed-to-market
  • Absorb business acquisitions
  • Invest in research and development to launch new products
  • Augment current production
  • Contract manufacturers help to improve supply chain and logistics for high quality products
  • Respond to changes in demand more nimbly
  • Maintain strategic flexibility to reduce costs
  • Risk management through dual-sourcing

The Coastline Difference

In addition to our high-level contract manufacturing solutions, our team can also manage the procurement and logistics processes for you, including the full “turnkey” solution of procurement of materials and components, materials management, alternate source suggestions, and import/export management.

Our typical client develops their products in the United States, outsources some or all of their manufacturing to our Mexico facility, and markets & sells their products in domestic and international markets, reducing costs and creating a viable manufacturing solution.

Per ISO standards, Coastline can perform quality assurance testing and first article inspection to ensure that every finished good meets your exact business specifications before being shipped from our manufacturing facility to its destination.

The above block is copied from the site: https://coastlineindev.wpenginepowered.com/

Pattern HTML

<!-- wp:group {"metadata":{"name":"Sliding Content"},"align":"full","className":"sliding-content-panel","style":{"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|110","bottom":"var:preset|spacing|110"}},"background":{"backgroundImage":{"url":"https://coastlineindev.wpenginepowered.com/wp-content/uploads/2025/10/sliding-content-bg-scaled.png","id":512,"source":"file","title":"sliding-content-bg"},"backgroundSize":"contain","backgroundRepeat":"repeat"}},"backgroundColor":"eight","layout":{"type":"constrained","contentSize":"1420px"}} --> <div class="wp-block-group alignfull sliding-content-panel has-eight-background-color has-background" style="margin-top:0;padding-top:var(--wp--preset--spacing--110);padding-bottom:var(--wp--preset--spacing--110)"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"blockGap":"0"},"border":{"radius":{"topLeft":"10px","topRight":"10px"}}},"backgroundColor":"five","layout":{"type":"constrained"}} --> <div class="wp-block-group has-five-background-color has-background" style="border-top-left-radius:10px;border-top-right-radius:10px;padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:heading {"textAlign":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}},"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}},"textColor":"one"} --> <h2 class="wp-block-heading has-text-align-center has-one-color has-text-color has-link-color" style="margin-bottom:var(--wp--preset--spacing--30)">Why Choose Coastline for Mexico <br>Contract Manufacturing?</h2> <!-- /wp:heading --> <!-- wp:list {"className":"sliding-content-nav","style":{"elements":{"link":{"color":{"text":"var:preset|color|one"}}},"spacing":{"padding":{"right":"0","left":"0"}}},"backgroundColor":"five","textColor":"one","fontSize":"heading-4"} --> <ul style="padding-right:0;padding-left:0" class="wp-block-list sliding-content-nav has-one-color has-five-background-color has-text-color has-background has-link-color has-heading-4-font-size"><!-- wp:list-item --> <li>Manufacturing Capabilities</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Manufacturing Solutions</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>The Coastline Difference</li> <!-- /wp:list-item --></ul> <!-- /wp:list --></div> <!-- /wp:group --> <!-- wp:group {"metadata":{"name":"Sliding Content Wrapper"},"className":"sliding-content-wrapper","layout":{"type":"constrained","contentSize":"1420px"}} --> <div class="wp-block-group sliding-content-wrapper"><!-- wp:group {"metadata":{"name":"Sliding Content Panel One"},"className":"sliding-content-panel-1","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","right":"var:preset|spacing|70","left":"var:preset|spacing|70"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"one","layout":{"type":"constrained"}} --> <div class="wp-block-group sliding-content-panel-1 has-one-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--70)"><!-- wp:heading --> <h2 class="wp-block-heading">Manufacturing Capabilities</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Some examples of manufacturing capabilities include:</p> <!-- /wp:paragraph --> <!-- wp:columns {"verticalAlignment":"top","className":"mobile-col-gap-none"} --> <div class="wp-block-columns are-vertically-aligned-top mobile-col-gap-none"><!-- wp:column {"verticalAlignment":"top","width":"","animationsForBlocks":{"animation":"fade","variation":"fade","once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-top has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0" data-aos="fade" data-aos-easing="linear" data-aos-once="true"><!-- wp:list {"className":"is-style-arrow"} --> <ul class="wp-block-list is-style-arrow"><!-- wp:list-item --> <li>Finished Device Assembly</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Manual Assembly of Components &amp; Subassemblies</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Box-build &amp; Mechanical Assembly</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Secondary Manufacturing Processes</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Electronics Assembly Processes</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Micro Assembly / High-power Magnification</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Cleanroom Assembly &amp; Packaging</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Soldering (IPC standard)</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Custom Battery Pack Assembly</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Cable Harness Assembly</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Program Management</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Lean Manufacturing Principles</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Sterile-barrier Packaging</li> <!-- /wp:list-item --></ul> <!-- /wp:list --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top","width":"","animationsForBlocks":{"animation":"fade","variation":"fade","delay":200,"once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-top has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0" data-aos="fade" data-aos-delay="200" data-aos-easing="linear" data-aos-once="true"><!-- wp:list {"className":"is-style-arrow"} --> <ul class="wp-block-list is-style-arrow"><!-- wp:list-item --> <li>Solvent bonding</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>UV Curing &amp; EFD Adhesive Processes</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Ultrasonic Welding</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>RF Welding (Radio Frequency)</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Friction Fit (press-fit) Assembly</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Textiles &amp; Soft Goods Sewing</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Thermoforming</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Die Cutting (Clicker Press)</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Hot Stamping</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>ESD Control Procedures</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Product Labeling &amp; Label Printing (lot traceability)</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Engineering Services &amp; Validation Activities</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Process Qualifications</li> <!-- /wp:list-item --></ul> <!-- /wp:list --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top","width":"","animationsForBlocks":{"animation":"fade","variation":"fade","delay":200,"once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-top has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0" data-aos="fade" data-aos-delay="200" data-aos-easing="linear" data-aos-once="true"><!-- wp:list {"className":"is-style-arrow"} --> <ul class="wp-block-list is-style-arrow"><!-- wp:list-item --> <li>Sterilization (contract) &amp; Sterilization Management</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Automated Assembly Processes</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Tooling and fixture development</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Inspection Services</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Metrology: Optical Measure System (OMM)</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Pull Testing, Leak Testing, Flow Testing</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Form-Fill-Seal (FFS) Packaging</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Import-Export &amp; Customs Expertise</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Procurement &amp; Logistics</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Materials Management</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>NPI: Manufacturing Transfer Management</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Automation &amp; Semi-Automated Processes</li> <!-- /wp:list-item --></ul> <!-- /wp:list --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group --> <!-- wp:group {"metadata":{"name":"Sliding Content Panel Two"},"className":"sliding-content-panel-2","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","right":"var:preset|spacing|70","left":"var:preset|spacing|70"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"one","layout":{"type":"constrained"}} --> <div class="wp-block-group sliding-content-panel-2 has-one-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--70)"><!-- wp:heading --> <h2 class="wp-block-heading">Manufacturing Solutions</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Contract manufacturing in Mexico can provide a number of benefits. Working with Coastline to outsource your manufacturing needs to our Tijuana, Mexico facilities will allow you to optimize your domestic business operations. With Coastline, nearshore contract manufacturing operations in Mexico will give you the ability to:</p> <!-- /wp:paragraph --> <!-- wp:columns {"verticalAlignment":"top","className":"mobile-col-gap-none"} --> <div class="wp-block-columns are-vertically-aligned-top mobile-col-gap-none"><!-- wp:column {"verticalAlignment":"top","width":"","animationsForBlocks":{"animation":"fade","variation":"fade","once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-top has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0" data-aos="fade" data-aos-easing="linear" data-aos-once="true"><!-- wp:list {"className":"is-style-arrow"} --> <ul class="wp-block-list is-style-arrow"><!-- wp:list-item --> <li>Reduce labor costs</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Immediately increase capacity to scale manufacturing</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Focus on design, development, product innovation</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Eliminate in-house production challenges by using contract manufacturers</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Optimize speed-to-market</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Absorb business acquisitions</li> <!-- /wp:list-item --></ul> <!-- /wp:list --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"top","width":"","animationsForBlocks":{"animation":"fade","variation":"fade","delay":200,"once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-top has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0" data-aos="fade" data-aos-delay="200" data-aos-easing="linear" data-aos-once="true"><!-- wp:list {"className":"is-style-arrow"} --> <ul class="wp-block-list is-style-arrow"><!-- wp:list-item --> <li>Invest in research and development to launch new products</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Augment current production</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Contract manufacturers help to improve supply chain and logistics for high quality products</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Respond to changes in demand more nimbly</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Maintain strategic flexibility to reduce costs</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Risk management through dual-sourcing</li> <!-- /wp:list-item --></ul> <!-- /wp:list --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group --> <!-- wp:group {"metadata":{"name":"Sliding Content Panel Three"},"className":"sliding-content-panel-3","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|70","right":"var:preset|spacing|15","left":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"backgroundColor":"one","layout":{"type":"constrained"}} --> <div class="wp-block-group sliding-content-panel-3 has-one-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--15);padding-bottom:var(--wp--preset--spacing--70);padding-left:var(--wp--preset--spacing--30)"><!-- wp:columns {"verticalAlignment":"center"} --> <div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"54%","animationsForBlocks":{"animation":"fade","variation":"fade","once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-center has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:54%" data-aos="fade" data-aos-easing="linear" data-aos-once="true"><!-- wp:heading --> <h2 class="wp-block-heading">The Coastline Difference</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>In addition to our high-level contract manufacturing solutions, our team can also manage the procurement and logistics processes for you, including the full “turnkey” solution of procurement of materials and components, materials management, alternate source suggestions, and import/export management. </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Our typical client develops their products in the United States, outsources some or all of their manufacturing to our Mexico facility, and markets &amp; sells their products in domestic and international markets, reducing costs and creating a viable manufacturing solution. </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Per ISO standards, Coastline can perform quality assurance testing and first article inspection to ensure that every finished good meets your exact business specifications before being shipped from our manufacturing facility to its destination.</p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center","width":"","animationsForBlocks":{"animation":"fade","variation":"fade","delay":200,"once":true,"mirror":false,"easing":"linear"},"style":{"spacing":{"blockGap":"var:preset|spacing|15","padding":{"top":"0","bottom":"0","left":"0","right":"0"}},"border":{"radius":"10px"}},"backgroundColor":"sixth"} --> <div class="wp-block-column is-vertically-aligned-center has-sixth-background-color has-background" style="border-radius:10px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0" data-aos="fade" data-aos-delay="200" data-aos-easing="linear" data-aos-once="true"><!-- wp:image {"id":522,"sizeSlug":"full","linkDestination":"none","align":"center","className":"coastline-difference-image"} --> <figure class="wp-block-image aligncenter size-full coastline-difference-image"><img src="https://coastlineindev.wpenginepowered.com/wp-content/uploads/2025/10/image-6.png" alt="" class="wp-image-522"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --></div> <!-- /wp:group --></div> <!-- /wp:group --></div> <!-- /wp:group -->

Pattern CSS

.sliding-content-nav{ list-style-type: none; display: flex; justify-content: center; } .sliding-content-nav.fixed { position: fixed; top: 72px; left: 0; right: 0; /* background: var(--wp--preset--color--four); */ padding: 0.75rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 10; } .sliding-content-nav.fixed.hide{ opacity: 0; } .sliding-content-nav li{ border-right: 1px solid var(--wp--preset--color--one); padding-right: 20px; padding-left: 20px; cursor: pointer; font-weight: 400; transition: color 0.3s, font-weight 0.3s; } .sliding-content-nav li:last-child{ padding-right: 0px; border: 0px; } .sliding-content-nav li.active { font-weight: 700; color: var(--wp--preset--color--one, #0073aa); } .sliding-content-wrapper{ position: relative; } .sliding-content-scroll-nav{ width:30px; height:auto; border-radius: 30px; border: 1px solid rgba(12, 115, 116, 0.50); position: fixed; right: calc((100% - 1350px) / 2); top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding-top: 7px; padding-bottom: 7px; } /* Show when main nav is fixed */ .sliding-content-scroll-nav.fixed { opacity: 1; visibility: visible; } .sliding-content-scroll-nav .dot { width: 13px; height: 13px; border-radius: 50%; background: var(--wp--preset--color--eight); cursor: pointer; transition: all 0.3s ease; } .sliding-content-scroll-nav .dot.active, .sliding-content-scroll-nav .dot:hover{ background: var(--wp--preset--color--five); } @media only screen and (max-width: 1500px) { .sliding-content-scroll-nav{ right: calc((100% - 1250px) / 2); } } @media only screen and (max-width: 1420px) { .sliding-content-scroll-nav { right: 60px; } } @media only screen and (max-width: 1280px) { .sliding-content-scroll-nav { right: 55px; } } @media only screen and (max-width: 1200px) { .sliding-content-nav li{ font-size: 16px; } } @media only screen and (max-width: 980px) { .sliding-content-nav.fixed{ top:0px; } .sliding-content-nav li{ padding-right: 10px; padding-left: 10px; } #site-container .sliding-content-nav{ flex-direction: column; align-items: center; padding-top: 5px; } .sliding-content-nav li{ border: 0px; } } @media only screen and (max-width: 780px) { .sliding-content-wrapper > div{ padding-left: 18px !important; padding-right: 18px !important; } }

Pattern JS

document.addEventListener("DOMContentLoaded", function () { const nav = document.querySelector(".sliding-content-nav"); const wrapper = document.querySelector(".sliding-content-wrapper"); const panels = wrapper ? wrapper.querySelectorAll("[class*='sliding-content-panel-']") : []; if (panels.length > 0) { const scrollNav = document.createElement("div"); scrollNav.classList.add("sliding-content-scroll-nav"); wrapper.appendChild(scrollNav); // Adjust this offset based on your header + nav height const scrollOffset = 200; // Create dots dynamically panels.forEach((_, i) => { const dot = document.createElement("div"); dot.classList.add("dot"); if (i === 0) dot.classList.add("active"); dot.addEventListener("click", () => { const top = panels[i].getBoundingClientRect().top + window.scrollY - scrollOffset; window.scrollTo({ top, behavior: "smooth" }); }); scrollNav.appendChild(dot); }); const dots = scrollNav.querySelectorAll(".dot"); const navItems = nav.querySelectorAll("li"); const navOffset = 150; // Smooth scroll for nav clicks navItems.forEach((item, i) => { item.addEventListener("click", () => { const top = panels[i].getBoundingClientRect().top + window.scrollY - scrollOffset; window.scrollTo({ top, behavior: "smooth" }); }); }); // Fix nav at 150px from top const navInitialTop = nav.getBoundingClientRect().top + window.scrollY; window.addEventListener("scroll", () => { const wrapper = document.querySelector(".sliding-content-wrapper"); if (!wrapper) return; const rect = wrapper.getBoundingClientRect(); const halfway = window.innerHeight / 2; const buffer = 50; // Calculate wrapper bottom position relative to viewport const wrapperBottom = rect.bottom + window.scrollY; // ✅ condition for when nav should be fixed const shouldBeFixed = window.scrollY >= navInitialTop - navOffset && wrapperBottom > window.scrollY + nav.offsetHeight + buffer; if (shouldBeFixed) { nav.classList.add("fixed"); scrollNav.classList.add("fixed"); } else { // ✅ small timeout prevents instant flicker setTimeout(() => { nav.classList.remove("fixed"); scrollNav.classList.remove("fixed"); }, 50); } }); // Highlight active section const observer = new IntersectionObserver( entries => { entries.forEach(entry => { if (entry.isIntersecting) { const index = [...panels].indexOf(entry.target); navItems.forEach(li => li.classList.remove("active")); dots.forEach(dot => dot.classList.remove("active")); if (navItems[index]) navItems[index].classList.add("active"); if (dots[index]) dots[index].classList.add("active"); } }); }, { rootMargin: "-50% 0px -50% 0px", // triggers when the section is centered in view threshold: 0 } ); panels.forEach(panel => observer.observe(panel)); } });