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

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

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

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

عليك استخدام 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` لتحديد موقع العنوان المثبت، وتعديل الألوان والأسلوب حسب التصميم الخاص بك.

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

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

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

استاذي الفاضل معذرتا كون انني لم يسبق لي معرفة بهذا اللغة ولكن توضيح عندي قاعده بيانات بالاكسس وعامل جدول 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 لعرض البيانات من جدول بالاكسس 

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

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

بتاريخ 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

بتاريخ 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;
}

بتاريخ 6 ساعة قال Mustafa Suleiman:

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

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

 

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

توضيح.bmp

بتاريخ 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;
}

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