إختفاء عناوين الصفحة بالويب عن الضغط على أسهم لوحة المفاتيح أو التحريك لأعلى وأسفل

صابر مغترب · 16 يوليو 2023

السلام عليكم احبتي عندما احرك عجله الموس الضغط على أسهم الكيبورد علا وأسفل يختفي عناوين الصفحة كيف العمل كي يظل العنوان ثابت

تم التعديل في 16 يوليو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 16 يوليو 2023

السؤال غير واضح، في حال كنت تقصد أنك تعمل على تطوير موقع ويحدث ذلك، فهل قمت بإضافة كود يتم تنفيذه عند عمل Scroll؟

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

عبدالباسط ابراهيم · 16 يوليو 2023

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

عليك استخدام CSS لتثبيت عنوان الصفحة أثناء التمرير. يمكنك استخدام خاصية `position: fixed` لتثبيت العنوان في مكان معين على الصفحة، و `z-index` لتحديد الترتيب الظاهري للعنصر المثبت.

هذا هو مثال بسيط لكيفية تثبيت العنوان:

/* تثبيت العنوان في الأعلى بوضع position: fixed */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}

/* إضافة بعض التباعد للعنوان */
.header h1 {
  margin: 20px;
}

يمكنك تعديل قيم `top` و `left` و `right` لتحديد موقع العنوان المثبت، وتعديل الألوان والأسلوب حسب التصميم الخاص بك.

صابر مغترب · 17 يوليو 2023

بتاريخ On 16‏/7‏/2023 at 08:18 قال Mustafa Suleiman:

السؤال غير واضح، في حال كنت تقصد أنك تعمل على تطوير موقع ويحدث ذلك، فهل قمت بإضافة كود يتم تنفيذه عند عمل Scroll؟

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

استاذي الفاضل معذرتا كون انني لم يسبق لي معرفة بهذا اللغة ولكن توضيح عندي قاعده بيانات بالاكسس وعامل جدول WebCode فيه الشفرة الاتي

table{width:100%;border:1px gray solid;border-collapse:collapse;overflow-y:hidden;}

th,td{padding: 4px 8px;border:1px #ccc solid;height:40px}

td span{padding:0 8px;background:orange;color:white;font-size:14px;}

table { background-color:#E8F8F0; color:black; text-align: center;}

th{background:#146356; color:white;}
</style>

عندي نموذج بالاكسس فية WebBrowser2 لعرض البيانات من جدول بالاكسس

مثلا عندي العنوان اسم الصنف رقم الصنف في الاعلي تظهر بس عندما تحريك عجلة الموس او مفاتيح الكيبورد اعلا واسفل يختفي عناوي الجدول بالمستغرض ان شاء الله اكون اوصلت لك الشرح بطريقه افضل

تحياتي استاذي

بتاريخ On 16‏/7‏/2023 at 12:03 قال عبدالباسط ابراهيم:
لست متأكداً بالضبط بما تقصد. من المحتمل أن عناصر الصفحة تتحرك عند تحريك عجلة الفأرة. ولتجنب ذلك، يمكنك تحديد العناصر التي تريد أن تثبت مكانها عند تصغير الصفحة أو تكبيرها.

عليك استخدام CSS لتثبيت عنوان الصفحة أثناء التمرير. يمكنك استخدام خاصية `position: fixed` لتثبيت العنوان في مكان معين على الصفحة، و `z-index` لتحديد الترتيب الظاهري للعنصر المثبت.

هذا هو مثال بسيط لكيفية تثبيت العنوان:
/* تثبيت العنوان في الأعلى بوضع position: fixed */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
}

/* إضافة بعض التباعد للعنوان */
.header h1 {
  margin: 20px;
}
يمكنك تعديل قيم `top` و `left` و `right` لتحديد موقع العنوان المثبت، وتعديل الألوان والأسلوب حسب التصميم الخاص بك.

استاذ ي الفاضل اعتقد انك فهمتني والمعذره كوني مبتدي معاكم لم اوضح بشكل افضل فشرحت لاستاذنا Mustafa Suleiman ما اريده ياليت توضح لي كيف العمل لذالك اليك المثال العنوانين براس الصفحه اريدها ثابته حفظك الله استاذي

عنوان الجدول.rar عنوان الجدول.accdb

Mustafa Suleiman · 18 يوليو 2023

بتاريخ 16 ساعة قال صابر مغترب:

استاذي الفاضل معذرتا كون انني لم يسبق لي معرفة بهذا اللغة ولكن توضيح عندي قاعده بيانات بالاكسس وعامل جدول WebCode فيه الشفرة الاتي

<style>
*{box-sizing:border-box;font-size:18px}
.card{margin:10px auto;padding:10px;width:100%;}
.card th{height:40px;}

table{width:100%;border:1px gray solid;border-collapse:collapse;overflow-y:hidden;}

th,td{padding: 4px 8px;border:1px #ccc solid;height:40px}

td span{padding:0 8px;background:orange;color:white;font-size:14px;}

table { background-color:#E8F8F0; color:black; text-align: center;}

th{background:#146356; color:white;}
</style>

عندي نموذج بالاكسس فية WebBrowser2 لعرض البيانات من جدول بالاكسس

مثلا عندي العنوان اسم الصنف رقم الصنف في الاعلي تظهر بس عندما تحريك عجلة الموس او مفاتيح الكيبورد اعلا واسفل يختفي عناوي الجدول بالمستغرض ان شاء الله اكون اوصلت لك الشرح بطريقه افضل

تحياتي استاذي

استاذ ي الفاضل اعتقد انك فهمتني والمعذره كوني مبتدي معاكم لم اوضح بشكل افضل فشرحت لاستاذنا Mustafa Suleiman ما اريده ياليت توضح لي كيف العمل لذالك اليك المثال العنوانين براس الصفحه اريدها ثابته حفظك الله استاذي

عنوان الجدول.rar 78.5 kB · 0 تنزيلات عنوان الجدول.accdb 1.32 MB · 0 تنزيلات

أرجو توضيح ما تريده من خلال صورة أو فيديو لفهم سبب المشكلة ، وما فهمته أنك تريد تثبيت عنوان الجدول بناءًا على الكود الذي وضحته، ونستخدم خاصية position بقيمة sticky من أجل ذلك كالتالي:

th {
  position: sticky;
  top: 0;
  background: #146356;
  color: white;
}

صابر مغترب · 18 يوليو 2023

بتاريخ 6 ساعة قال Mustafa Suleiman:
أرجو توضيح ما تريده من خلال صورة أو فيديو لفهم سبب المشكلة ، وما فهمته أنك تريد تثبيت عنوان الجدول بناءًا على الكود الذي وضحته، ونستخدم خاصية position بقيمة sticky من أجل ذلك كالتالي:
th {
  position: sticky;
  top: 0;
  background: #146356;
  color: white;
}

انظر الي الصورة العنواين طرحت عليها مربع احمر هي مشكلتي فاريد عندما امرر في شريط التمرير العمودي او اسهم الكيبور اعلا واسفل تكون ثابته بحيث يراها المستخدم ان شاء الله تكون استاذي فهمت عليا

توضيح.bmp

Adnane Kadri · 19 يوليو 2023

بتاريخ 18 ساعة قال صابر مغترب:

انظر الي الصورة العنواين طرحت عليها مربع احمر هي مشكلتي فاريد عندما امرر في شريط التمرير العمودي او اسهم الكيبور اعلا واسفل تكون ثابته بحيث يراها المستخدم ان شاء الله تكون استاذي فهمت عليا

توضيح.bmp 3 MB · 0 تنزيلات

الشيفرات المرفقة من قبل المدربين تفي بالغرض، تأكد فقط من استعمالها على نحو صحيح فقط.

مرفق مثال عن جدول:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Job</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Olivia Saturday</td>
      <td>Senior Data Engineer</td>
      <td>$320,000</td>
    </tr>

    <tr>
      <td>David Smith</td>
      <td>Strategic Finance Manager</td>
      <td>$180,000</td>
    </tr>

    <tr>
      <td>Margaret Mills</td>
      <td>Lead Software Engineer</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Paul Brown</td>
      <td>Digital Content Writer</td>
      <td>$145,000</td>
    </tr>

    <tr>
      <td>Stephanie Tavartkiladze</td>
      <td>Digital Project Manager</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Olivia Saturday</td>
      <td>Senior Data Engineer</td>
      <td>$320,000</td>
    </tr>

    <tr>
      <td>David Smith</td>
      <td>Strategic Finance Manager</td>
      <td>$180,000</td>
    </tr>

    <tr>
      <td>Margaret Mills</td>
      <td>Lead Software Engineer</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Paul Brown</td>
      <td>Digital Content Writer</td>
      <td>$145,000</td>
    </tr>

    <tr>
      <td>Stephanie Tavartkiladze</td>
      <td>Digital Project Manager</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Olivia Saturday</td>
      <td>Senior Data Engineer</td>
      <td>$320,000</td>
    </tr>

    <tr>
      <td>David Smith</td>
      <td>Strategic Finance Manager</td>
      <td>$180,000</td>
    </tr>

    <tr>
      <td>Margaret Mills</td>
      <td>Lead Software Engineer</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Paul Brown</td>
      <td>Digital Content Writer</td>
      <td>$145,000</td>
    </tr>

    <tr>
      <td>Stephanie Tavartkiladze</td>
      <td>Digital Project Manager</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Olivia Saturday</td>
      <td>Senior Data Engineer</td>
      <td>$320,000</td>
    </tr>

    <tr>
      <td>David Smith</td>
      <td>Strategic Finance Manager</td>
      <td>$180,000</td>
    </tr>

    <tr>
      <td>Margaret Mills</td>
      <td>Lead Software Engineer</td>
      <td>$250,000</td>
    </tr>

    <tr>
      <td>Paul Brown</td>
      <td>Digital Content Writer</td>
      <td>$145,000</td>
    </tr>

    <tr>
      <td>Stephanie Tavartkiladze</td>
      <td>Digital Project Manager</td>
      <td>$250,000</td>
    </tr>
  </tbody>
</table>

التنسيقات المطبقة على هذا الجدول تكون:

table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;

  border-collapse: separate;
  border-spacing: 0;
}

tbody tr:nth-child(odd) {
  background-color: #ECE9E9;
}

th, td { /* cell */
  padding: 0.75rem;
  font-size: 0.9375rem;
}

th { /* header cell */
  font-weight: 700;
  text-align: left;
  color: #272838;
  border-bottom: 2px solid #EB9486;

  position: sticky;
  top: 0;
  background-color: #F9F8F8;
}

td { /* body cell */
  color: #7E7F9A;
}

/* demo stuff */
body {
  padding: 6rem 2rem;
  background-color: #F9F8F8;
}

سيعطي هذا نفس المقاربة التي تقصدها.

إختفاء عناوين الصفحة بالويب عن الضغط على أسهم لوحة المفاتيح أو التحريك لأعلى وأسفل

السؤال

صابر مغترب

6 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

عبدالباسط ابراهيم

صابر مغترب

Mustafa Suleiman

صابر مغترب

Adnane Kadri

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية