Top Orthopedic Surgeons in Saint Clair Shores, MI

Medicare procedure volume rankings for orthopedic surgeons in Saint Clair Shores, Michigan. Built on verified CMS Medicare data — pick a procedure to see surgeons ranked by volume.

4 surgeons 2 procedures ranked

Procedure Hip Replacement in Saint Clair Shores View ranked surgeons → Procedure Knee Replacement in Saint Clair Shores View ranked surgeons →

Surgeons practicing in Saint Clair Shores

4 orthopedic surgeons with profiles in Saint Clair Shores. Click any surgeon for full Medicare procedure volume, hospital affiliations, and credentials.

// Theme Toggle const themeToggle = document.querySelector('.theme-toggle'); const sunIcon = document.querySelector('.sun-icon'); const moonIcon = document.querySelector('.moon-icon'); function updateThemeIcons(isDark) { if (isDark) { sunIcon.style.display = 'none'; moonIcon.style.display = 'block'; } else { sunIcon.style.display = 'block'; moonIcon.style.display = 'none'; } } // Initialize theme on page load const savedTheme = localStorage.getItem('theme'); const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light'); if (initialTheme === 'dark') { document.documentElement.classList.add('dark'); updateThemeIcons(true); } themeToggle?.addEventListener('click', () => { const isDark = document.documentElement.classList.toggle('dark'); localStorage.setItem('theme', isDark ? 'dark' : 'light'); updateThemeIcons(isDark); }); // Menu Toggle const menuButton = document.querySelector('.menu-button'); const menuDropdown = document.querySelector('.menu-dropdown'); menuButton?.addEventListener('click', () => { const isOpen = menuDropdown.style.display === 'block'; menuDropdown.style.display = isOpen ? 'none' : 'block'; menuButton.setAttribute('aria-expanded', !isOpen); }); // Close menu when clicking outside document.addEventListener('click', (e) => { if (!menuButton?.contains(e.target) && !menuDropdown?.contains(e.target)) { menuDropdown.style.display = 'none'; menuButton?.setAttribute('aria-expanded', 'false'); } }); // === ENHANCED ANIMATIONS & INTERACTIONS === // Intersection Observer for fade-in animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const fadeObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Apply fade-in to all elements with fade-in class document.querySelectorAll('.fade-in').forEach(el => { fadeObserver.observe(el); }); // Scroll glow effect const glowObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); setTimeout(() => { entry.target.classList.remove('active'); }, 2000); } }); }, { threshold: 0.3 }); // Apply glow to cards document.querySelectorAll('.scroll-glow').forEach(el => { glowObserver.observe(el); }); // Magnetic button effect const magneticButtons = document.querySelectorAll('.magnetic-btn'); magneticButtons.forEach(button => { button.addEventListener('mousemove', (e) => { const rect = button.getBoundingClientRect(); const x = e.clientX - rect.left - rect.width / 2; const y = e.clientY - rect.top - rect.height / 2; const moveX = x * 0.2; const moveY = y * 0.2; button.style.transform = `translate(${moveX}px, ${moveY}px) scale(1.05)`; }); button.addEventListener('mouseleave', () => { button.style.transform = 'translate(0, 0) scale(1)'; }); }); // 3D Tilt effect for cards const tiltCards = document.querySelectorAll('.tilt-card'); tiltCards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const rotateX = (y - centerY) / 20; const rotateY = (centerX - x) / 20; card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-4px) scale(1.02)`; card.style.transition = 'transform 0.1s ease'; }); card.addEventListener('mouseleave', () => { card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0) scale(1)'; card.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'; }); }); // Scroll progress indicator let progressBar = document.querySelector('.scroll-progress'); if (!progressBar) { progressBar = document.createElement('div'); progressBar.className = 'scroll-progress'; progressBar.style.cssText = ` position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #3b82f6; transform-origin: left; z-index: 9999; transition: transform 0.1s ease-out; `; document.body.prepend(progressBar); } function updateScrollProgress() { const winScroll = document.documentElement.scrollTop; const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (winScroll / height); progressBar.style.transform = `scaleX(${scrolled})`; } let progressTicking = false; window.addEventListener('scroll', () => { if (!progressTicking) { window.requestAnimationFrame(() => { updateScrollProgress(); progressTicking = false; }); progressTicking = true; } }, { passive: true }); // === SURGEON SEARCH AUTOCOMPLETE === (function() { const searchInput = document.getElementById('surgeon-search-input'); const searchResults = document.getElementById('surgeon-search-results'); const clearBtn = document.getElementById('search-clear-btn'); if (!searchInput || !searchResults) return; let surgeonIndex = null; let isLoading = false; let debounceTimer = null; let highlightedIndex = -1; // Load search index on first interaction async function loadSearchIndex() { if (surgeonIndex || isLoading) return; isLoading = true; try { searchResults.style.display = 'block'; searchResults.innerHTML = '

Loading surgeons...

'; const response = await fetch('/surgeon-search-index.json'); if (!response.ok) throw new Error('Failed to load search index'); surgeonIndex = await response.json(); // Clear loading message if input is still empty if (!searchInput.value.trim()) { searchResults.style.display = 'none'; } else { performSearch(searchInput.value); } } catch (err) { console.error('Search index load error:', err); searchResults.innerHTML = '

Search unavailable

'; } finally { isLoading = false; } } // Escape HTML to prevent XSS function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // Highlight matching text function highlightMatch(text, query) { if (!query) return escapeHtml(text); const escaped = escapeHtml(text); const regex = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi'); return escaped.replace(regex, '$1'); } // Perform search function performSearch(query) { if (!surgeonIndex) return; const trimmed = query.trim().toLowerCase(); if (!trimmed) { searchResults.style.display = 'none'; return; } // Filter results (search name and location) const results = surgeonIndex .filter(s => { const name = s.n.toLowerCase(); const location = s.l.toLowerCase(); return name.includes(trimmed) || location.includes(trimmed); }) .slice(0, 8); // Limit to 8 results highlightedIndex = -1; if (results.length === 0) { searchResults.innerHTML = '

No surgeons found

'; searchResults.style.display = 'block'; return; } searchResults.innerHTML = results.map((s, i) => ` ${highlightMatch(s.n, trimmed)} ${highlightMatch(s.l, trimmed)} `).join(''); searchResults.style.display = 'block'; } // Debounced search function debouncedSearch(query) { clearTimeout(debounceTimer); debounceTimer = setTimeout(() => performSearch(query), 150); } // Handle keyboard navigation function handleKeyNav(e) { const items = searchResults.querySelectorAll('.search-result-item'); if (!items.length) return; if (e.key === 'ArrowDown') { e.preventDefault(); highlightedIndex = Math.min(highlightedIndex + 1, items.length - 1); updateHighlight(items); } else if (e.key === 'ArrowUp') { e.preventDefault(); highlightedIndex = Math.max(highlightedIndex - 1, -1); updateHighlight(items); } else if (e.key === 'Enter' && highlightedIndex >= 0) { e.preventDefault(); items[highlightedIndex].click(); } else if (e.key === 'Escape') { searchResults.style.display = 'none'; searchInput.blur(); } } function updateHighlight(items) { items.forEach((item, i) => { item.classList.toggle('highlighted', i === highlightedIndex); if (i === highlightedIndex) { item.scrollIntoView({ block: 'nearest' }); } }); } // Event listeners searchInput.addEventListener('focus', loadSearchIndex); searchInput.addEventListener('input', (e) => { const value = e.target.value; clearBtn.style.display = value ? 'block' : 'none'; if (!surgeonIndex && !isLoading) { loadSearchIndex(); } debouncedSearch(value); }); searchInput.addEventListener('keydown', handleKeyNav); clearBtn.addEventListener('click', () => { searchInput.value = ''; clearBtn.style.display = 'none'; searchResults.style.display = 'none'; searchInput.focus(); }); // Close results when clicking outside document.addEventListener('click', (e) => { if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) { searchResults.style.display = 'none'; } }); })();