अरे देवों! मुझे यह अपने नोट-टेकिंग ऐप पर काम करते समय पता चला।
यहां मेरे ऐप का उपयोग करते हुए एक पोस्ट है।
एक्स (ट्विटर) पर प्रगति साझा करना

क्या आपको कभी आश्चर्य हुआ है कि सीएसएस आपकी अपेक्षा के अनुरूप काम नहीं कर रहा है?
मेरे साथ (फिर से) ऐसा ही हुआ जब मैंने नीचे एक तत्व को ठीक करने के लिए सेट किया और फिर अपने iPhone पर कीबोर्ड खोला।

मैंने जो देखा वह यह है कि वह तत्व बिल्कुल भी दिखाई नहीं दे रहा है।
क्योंकि यह तय हो गया है. नीचे। कीबोर्ड के पीछे.

ऐसा लगता है कि समस्या को ठीक करने के लिए हमें कुछ JS की आवश्यकता है।

विज़ुअलव्यूपोर्ट

अच्छे समर्थन वाला एक ब्राउज़र एपीआई है जिसका उपयोग इन उद्देश्यों के लिए किया जा सकता है: विज़ुअल व्यूपोर्ट।
यह वास्तविक दृश्यमान व्यूपोर्ट की चौड़ाई और ऊंचाई लौटाता है। डॉक्स से एमडीएन लिंक।
हालाँकि, यह देखने के लिए अपनी स्वयं की जाँच करें कि क्या यह उन संस्करणों के लिए समर्थित है जिन्हें आप लक्षित कर रहे हैं।

गणित

मूल रूप से, हमें विज़ुअल व्यूपोर्ट के संबंध में तत्व की स्थिति, साथ ही स्क्रॉल स्थिति और तत्व की ऊंचाई को संभालने की आवश्यकता है। आइए गणित करें।

इसके अलावा, चूंकि गणित इस तरह से बहुत सरल है, इसलिए नीचे के बजाय शीर्ष पैरामीटर का उपयोग करना समझ में आता है।

top = viewport height   scroll - element height

कार्यान्वयन

मैं रिएक्ट का उपयोग करूंगा। किसी भी अन्य ढांचे के लिए, आप केवल यूज़इफ़ेक्ट हुक की सामग्री की प्रतिलिपि बना सकते हैं।

import { useEffect, useState } from 'react';
import classNames from 'classnames';
import { useDebounce } from 'use-debounce';

const elementHeight = 55; // elem. height in pixels
// It's also a good idea to calculate it dynamically via ref

export const FixedBlock = () => {
  // top postion -> the most important math result goes here
  const [top, setTop] = useState(0);

  useEffect(() => {
    function resizeHandler() {
      // viewport height
      const viewportHeight = window.visualViewport?.height ?? 0;
      // math
      setTop(viewportHeight   window.scrollY - elementHeight)
    }

    // run first time to initialize 
    resizeHandler();

    // subscribe to events which affect scroll, or viewport position
    window.visualViewport?.addEventListener('resize', resizeHandler);
    window.visualViewport?.addEventListener('scroll', resizeHandler);
    window?.addEventListener('touchmove', resizeHandler);

    // unsubscribe
    return () => {
      window.visualViewport?.removeEventListener('resize', resizeHandler);
      window.visualViewport?.removeEventListener('scroll', resizeHandler);
      window?.removeEventListener('touchmove', resizeHandler);
    };
  }, [debouncedScroll]);

  return (
    
      

        I am fixed
      
    >
  );
};

अंतिम परिणाम

मुझे कुछ एनिमेशन जोड़ने और स्क्रॉल पर अपना ब्लॉक छिपाने की भी आवश्यकता थी, लेकिन आपको ऐसा करने की ज़रूरत नहीं है, और यह हमेशा दिखाई देगा।