Scroll در جاوا اسکریپت

H

Hamanweb.ir

New Member
سلام دوستان
چطوری میتونم با javascript تایین کنم که وقتی کاربر صفحه رو تا یک حدی اسکرول کرد بعدش یک المنت به نمایش در بیاد؟
ممنون میشم راهنمایی کنید.
 
the_king

the_king

مدیرکل انجمن
Hamanweb.ir گفت:
سلام دوستان
چطوری میتونم با javascript تایین کنم که وقتی کاربر صفحه رو تا یک حدی اسکرول کرد بعدش یک المنت به نمایش در بیاد؟
ممنون میشم راهنمایی کنید.
کلیک کنید تا باز شود...
فرض کنیم که شما یک المنت با id ای مثل myID دارید. اول برایش دو تا استایل تعریف می کنید که در حالت bottomMenu hide مخفی باشه (opacity اش صفر باشه) و در حالت
bottomMenu show آشکار باشه (opacity اش یک باشه). حالا جلوه دیگری خواستید هم مشخص می کنید :
CSS: 
body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}
و در کد html هم بصورت پیشفرض hide اش می کنید :
HTML: 
<div id="myID" class="bottomMenu hide"></div>
حالا همچین کد javascript ای لازمه اجرا بشه تا رخداد scroll پنجره رو به myScrollFunc متصل کنه که وقتی صفحه بیشتر از 800 پیکسل عمودی پیمایش شد bottomMenu show رو اعمال کنه :
JavaScript: 
myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);
رجوع شود به :
Show div on scrollDown after 800px
 
H

Hamanweb.ir

New Member
the_king گفت:
فرض کنیم که شما یک المنت با id ای مثل myID دارید. اول برایش دو تا استایل تعریف می کنید که در حالت bottomMenu hide مخفی باشه (opacity اش صفر باشه) و در حالت
bottomMenu show آشکار باشه (opacity اش یک باشه). حالا جلوه دیگری خواستید هم مشخص می کنید :
CSS: 
body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}
و در کد html هم بصورت پیشفرض hide اش می کنید :
HTML: 
<div id="myID" class="bottomMenu hide"></div>
حالا همچین کد javascript ای لازمه اجرا بشه تا رخداد scroll پنجره رو به myScrollFunc متصل کنه که وقتی صفحه بیشتر از 800 پیکسل عمودی پیمایش شد bottomMenu show رو اعمال کنه :
JavaScript: 
myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);
رجوع شود به :
Show div on scrollDown after 800px
کلیک کنید تا باز شود...
ممنون از کمکتون
 
the_king

the_king

مدیرکل انجمن
Hamanweb.ir گفت:
آیا میشه به جای پیکسل از vh استفاده کرد توی این کد؟
کلیک کنید تا باز شود...
چرا. تغییرش دادم ولی برای سازگاری با همه Browser ها بهتره با یک شخص وارد در اینکار مشورت کنید :
HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}
</style>
</head>
<body>

<div id="myID" class="bottomMenu hide"></div>

<script>
function getScrollVH(){
  var html = document.documentElement;
  return 100 * (window.pageYOffset || html.scrollTop) / html.clientHeight;
}

myID = document.getElementById("myID");

var myScrollFunc = function() {
  var vh = getScrollVH();
 
  if (vh >= 50) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);
</script>

</body>
</html>
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا