feat:移动端表头吸附效果优化

This commit is contained in:
hzm
2026-03-08 11:58:13 +08:00
parent 89d938a6c3
commit 6d2cf60d21
2 changed files with 7 additions and 9 deletions

View File

@@ -108,6 +108,7 @@ export default function MobileFundTable({
sortBy = 'default', sortBy = 'default',
onReorder, onReorder,
onCustomSettingsChange, onCustomSettingsChange,
stickyTop = 0,
}) { }) {
const sensors = useSensors( const sensors = useSensors(
useSensor(PointerSensor, { useSensor(PointerSensor, {
@@ -293,16 +294,14 @@ export default function MobileFundTable({
useEffect(() => { useEffect(() => {
if (typeof window === 'undefined') return; if (typeof window === 'undefined') return;
const handleVerticalScroll = () => { const handleVerticalScroll = () => {
console.log('scrollY', window.scrollY); setShowPortalHeader(window.scrollY >= stickyTop);
setShowPortalHeader(window.scrollY >= 100);
}; };
handleVerticalScroll(); handleVerticalScroll();
window.addEventListener('scroll', handleVerticalScroll, { passive: true }); window.addEventListener('scroll', handleVerticalScroll, { passive: true });
return () => window.removeEventListener('scroll', handleVerticalScroll); return () => window.removeEventListener('scroll', handleVerticalScroll);
}, []); }, [stickyTop]);
useEffect(() => { useEffect(() => {
const tableEl = tableContainerRef.current; const tableEl = tableContainerRef.current;
@@ -323,11 +322,9 @@ export default function MobileFundTable({
useEffect(() => { useEffect(() => {
const tableEl = tableContainerRef.current; const tableEl = tableContainerRef.current;
const portalEl = portalHeaderRef.current; const portalEl = portalHeaderRef.current;
console.log('portalEl', portalEl)
if (!tableEl || !portalEl) return; if (!tableEl || !portalEl) return;
const syncScrollToPortal = () => { const syncScrollToPortal = () => {
console.log('tableEl.scrollLeft', tableEl.scrollLeft)
portalEl.scrollLeft = tableEl.scrollLeft; portalEl.scrollLeft = tableEl.scrollLeft;
}; };
@@ -341,11 +338,11 @@ export default function MobileFundTable({
const handlePortalScroll = () => syncScrollToTable(); const handlePortalScroll = () => syncScrollToTable();
tableEl.addEventListener('scroll', handleTableScroll, { passive: true }); tableEl.addEventListener('scroll', handleTableScroll, { passive: true });
// portalEl.addEventListener('scroll', handlePortalScroll, { passive: true }); portalEl.addEventListener('scroll', handlePortalScroll, { passive: true });
return () => { return () => {
tableEl.removeEventListener('scroll', handleTableScroll); tableEl.removeEventListener('scroll', handleTableScroll);
// portalEl.removeEventListener('scroll', handlePortalScroll); portalEl.removeEventListener('scroll', handlePortalScroll);
}; };
}, [showPortalHeader]); }, [showPortalHeader]);
@@ -823,7 +820,7 @@ export default function MobileFundTable({
const renderContent = (onlyShowHeader) => { const renderContent = (onlyShowHeader) => {
if (onlyShowHeader) { if (onlyShowHeader) {
return ( return (
<div style={{position: 'fixed', top: 175}} className="mobile-fund-table mobile-fund-table-portal-header" ref={portalHeaderRef}> <div style={{position: 'fixed', top: stickyTop}} className="mobile-fund-table mobile-fund-table-portal-header" ref={portalHeaderRef}>
<div <div
className="mobile-fund-table-scroll" className="mobile-fund-table-scroll"
style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined} style={mobileGridLayout.minWidth != null ? { minWidth: mobileGridLayout.minWidth } : undefined}

View File

@@ -4226,6 +4226,7 @@ export default function HomePage() {
currentTab={currentTab} currentTab={currentTab}
favorites={favorites} favorites={favorites}
sortBy={sortBy} sortBy={sortBy}
stickyTop={navbarHeight + filterBarHeight - 14}
onReorder={handleReorder} onReorder={handleReorder}
onRemoveFund={(row) => { onRemoveFund={(row) => {
if (refreshing) return; if (refreshing) return;