تغییر خواص منو بعد از اسکرول با استفاده از ویژگی sticky

Question

0

سلام به همه ی دوستان

همونطور که میدونید با استفاده خاصیت sticky میتونیم از یه جایی به بعد عنصر موردنظر رو ثابت نگه داریم.

حالا من یه منو با استفاده از این ویژگی ساختم میخوام وقتی این خاصیت فعال شد(یعنی کاربر به سمت پایین اسکرول کرد) مثلا شفافیت و سایز منو تغییر کنه.

چه باید کرد؟ 🙂

#menu {
    width: 900px;
    height: 50px;
    background-color: yellow;
    position: sticky;
    top: 0px;
}

css

پست شده در ۲۵ آذر ۱۳۹۶

10jafar 16

کامنتی پیدا نشد.

1 جواب

score 2 · Answer 1 · 2017-12-18T13:18:18+00:00

برای اینکه استایل های مورد نظرتون( تغییر ارتفاع و رنگ زمینه) رو به منو بدید ، باید از javascript کمک بگیرید. به اینصورت که
یک کلاس در css درنظر بگیریم برای استایلهایی که می خواییم تغییر کنه . برای مثال resize

.resize {
  height: 35px;
  background: hsla(60, 100%, 58%, 0.88);
}

بعد با جاوااسکریپت یا جی کوئری با توجه به موقعیت اسکرول و منو اون کلاس را add یا removeکنیم:

//code is taken from https://www.w3schools.com/howto/howto_js_sticky_header.asp

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

// Get the header
var menu = document.getElementById("menu");

// Get the offset position of the menu
var menuposition = menu.offsetTop;

// Add the resize class to the nav when you reach its scroll position. Remove "resize" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= menuposition) {
    menu.classList.add("resize");
  } else {
    menu.classList.remove("resize");
  }
}

نمونه

یک نکته: در مورد کدی که نوشتین ،شما اینجا استایل هاتون را برای id تعریف کردید برای اینکه با مشکل مواجه نشید و استایلهایی که برای کلاسی که تعیین کردید، خونده بشه،باید استایلهای اولیه رو هم به یک کلاس بدید تا id.

کلا از id در سی اس اس استفاده نکنید. از این مقاله

پرسیده شده	۲۶ آذر ۱۳۹۶
دیده شده	0 بار
بروزرسانی	۲۶ آذر ۱۳۹۶