كيف أقوم بإنشاء عنصر على صفحة يبقى دائمًا مرئيًا ولكنه ينتقل بعيدًا عن عناصر أخرى؟

Question

لدي صفحة HTML التي تخطيط معقد جدًا (انظر هنا). أحتاج إلى وضع صورة على تلك الصفحة التي يمكن للزائر سحبها إلى أي مكان حتى تتمكن من تذكر مكانها. لقد قمت بتطبيق ميزة الإشارة المرجعية ، لكنني الآن بحاجة إلى وضع الصورة في مكان ما يمكن أن تمسك بها بسهولة.

في الأساس ، أود أن يبقى العنصر تحت TOC على اليمين ولكن لا ينبغي أن يخرج عن الرؤية.

أعتقد أنه يمكنني استخدام JavaScript لنقل العنصر بمجرد أن يبدأ في التمرير خارج الرؤية ولكن هل هناك خيار أفضل؟ هل يمكنني قول "تعويم يمينًا وتحت toc div أو عرض. top ، أيهما أكبر"؟

أو ربما يجب أن أقوم بإنشاء رأس ثابت (مع الروابط وربما TOC)؟

أي أفكار أخرى؟

Answer 1

من المحتمل أن يتم ذلك باستخدام jQuery ، ولكن سيكون دائمًا متزايدًا. أود أن أعتبر ديف ثابت. بالطبع ، يمكنك وضع ذلك أسفل القائمة حتى لا يكون أعلى أبدًا (= أقرب نحو الحافة العلوية) من القائمة ، وسيحافظ على موضعها.

.thingy { position: fixed; right: 0px; top: 415px; width: 256px }

قد يتطلب ذلك عدم وجود شيء آخر أسفل القائمة ، وإلا فإن أيقونة الإشارة المرجعية ستتداخل أشياء أخرى.

Answer 2

إذا كنت تريد فقط إصلاح الصورة ، ولكن لا تزال قابلة للتمرير إلى أعلى النافذة ، فستحتاج إلى التعامل مع حدث تمرير النافذة ، وتعيين موضع الصورة على ثابت عند تمرير الصورة إلى الأعلى.

للحصول على مثال على ذلك ، راجع التنقل في الموقع وضع المراوغات.

بدلاً من ذلك ، يمكنك إعطاء TOC بأكمله position: fixed; right: 0;, ، امنح TOC عرضًا ، وأعطي الدعابة الهامش الأيمن مساوياً لعرض TOC. لن يكون هناك متطلبات JavaScript بهذه الطريقة ، وسيكون لديك TOC بالكامل مرئيًا دائمًا.