راکت

sticky header

4 پاسخ

براي هدر صفحم كد نوشتم كه در حال اسكرول بمونه بالاي صفحه و كاملا بخوبي داشت كار ميكرد و 10 دقيقه اخر وقتي براي چك كردن دوباره لود كردم ديگ كار نميكنه

كد html:

<div class="divheader" id="myHeader">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="26" height="26" viewBox="0 0 172 172" style=" fill:#c1afa4; float:left; margin-top:26px;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="****" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#c1afa4"><path d="M21.5,21.5v129h64.5v-32.25v-64.5v-32.25zM86,53.75c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25c-17.7805,0 -32.25,14.4695 -32.25,32.25zM118.25,86c-17.7805,0 -32.25,14.4695 -32.25,32.25c0,17.7805 14.4695,32.25 32.25,32.25c17.7805,0 32.25,-14.4695 32.25,-32.25c0,-17.7805 -14.4695,-32.25 -32.25,-32.25z"></path></g></g></svg>
<h1 class="h1s">Candelin</h1>
<a href="https://roocket.ir/ContactPage.html" class="buttons" target="blank">Contact</a>
<a href="https://roocket.ir/AboutUsPage.html" class="buttons" target="blank">About us</a>
<a href="https://roocket.ir/ProductsPage.html" class="buttons" target="blank">Products<img src="icons8-wishlist-32.png" style="width:28px; height:28px; display:inline; overflow:auto; float:right; margin-top:-6px;"></a>
<a href="https://roocket.ir/Faranak.Jabbari.Final.Project.html" class="buttons" target="blank">Home</a>
</div>

كد javascript:

<script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
console.log('myFunction()');
</script>
ثبت پرسش جدید

پاسخ‌ها

4
محمد زورمند
محمد زورمند
@SpyStar0003

تخصص: react developer

سلام
شما کلاس sticky رو اضافه میکنین...

آیا این کلاس مقادیر position = sticky و top = 0 رو داره ؟

fara
fara
@fjvrse

تخصص: دانشجو

بله دادم اینارو بهش

شاید پاسخ شما همین‌جا باشد

محمد زورمند
محمد زورمند
@SpyStar0003

تخصص: react developer

سلام داداش
من الان کدت رو روی سیستم خودم امتحان کردم و کاملا درست اجرا میشه !

نگاه کن شاید یه مشکل پیش پاافتاده داری مثلا script رو بد فراخوانی کردی یا یه چیزی مثل این

مثلا همین اسکریپت که گذاشتی...
این کجاس اگه فایلش جداست script ها رو حذفشون کن اگه داخل HTML هست باید آخر سند باشه و اگه اول سند هست باید مقدار defer بگیره

fara
fara
@fjvrse

تخصص: دانشجو

نه اسكريپت رو داخل خود html نوشتم و جاش رو هم عوض كردم نياورد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام