---
title: "آموزش مخفی کردن/ نمایش دادن سربرگ در اسکرول"
url: "https://elementorfa.ir/elementor-header-show-scroll-up/"
type: "post"
published: "2020-04-25T21:00:34+04:30"
modified: "2020-05-06T00:37:55+04:30"
author: "المنتور فارسی"
---

5/5 - (22 امتیاز)

شاید در بسیاری از سایت ها، هنگام اسکرول به بالا و پایین به سربرگ آن ها توجه کرده باشید.

به این صورت که در هنگام اسکرول به پایین سربرگ مخفی می شود و در اسکرول به بالا سربرگ نمایش داده می شود.

امروز، در این آموزش قصد داریم تا سربرگی که با المنتور طراحی شده را در صورت اسکرول به سمت پایین مخفی و اسکرول به سمت بالا نمایش دهیم.



برای استفاده از این آموزش به 2 افزونه زیر نیاز داریم:

- افزونه المنتور پرو
- افزونه [Simple Custom CSS and JS](https://wordpress.org/plugins/custom-css-js/) (رایگان در مخزن وردپرس)

## طراحی سربرگ توسط المنتور

برای این کار باید سربرگ خود را توسط المنتور طراحی کرده باشید. با استفاده از [آموزش طراحی سربرگ توسط المنتور](https://elementorfa.ir/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%b1%d8%a8%d8%b1%da%af-%da%86%d8%b3%d8%a8%d9%86%d8%af%d9%87-%d8%a8%d8%a7-%d8%a7%d9%84%d9%85%d9%86%d8%aa%d9%88%d8%b1/) ابتدا یک سربرگ طراحی کرده و سپس ادامه مراحل را طی کنید.

### تنظیمات سربرگ برای حالت چسبان

وارد قالب سربرگ طراحی شده در المنتور شده و در تب پیشرفته گزینه**ایندکس Z** را روی 999 قرار دهید. این کار برای قرار گرفتن سربرگ روی تمامی المان های صفحه می باشد.

همچنین در بخش **شناسه CSS** مقدار stickyheaders را قرار دهید.

![سربرگ چسبنده با المنتور](https://elementorfa.ir/wp-content/uploads/2020/04/elementor-sticky-scroll-header.png)

سپس از تب موشن افکت، گزینه **شناور** را روشن کرده و روی گزینه **بالا** قرار دهید.

![سربرگ چسبنده با المنتور](https://elementorfa.ir/wp-content/uploads/2020/04/elementor-sticky-scroll-header-top.png)

حالا به تب **CSS سفارشی** رفته و کد زیر را داخل کادر قرار دهید:

```
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
```

توجه کنید در گزینه `translateY(-110px);` باید مقدار ارتفاع سربرگ خودتان را به صورت منفی قرار دهید.

اگر سربرگی طراحی کردید که 90 پیکسل ارتفاع دارد باید مقدار `translateY(-90px)` باشد.

### قرار دادن کد جاوا اسکریپت در وردپرس

بعد از نصب افزونه Simple Custom CSS and JS داخل پیشخوان وردپرس، تب Custom CSS & JS گزینه Add Custom JS را بزنید.

در صفحه باز شده ابتدا یک عنوان انتخاب کنید و کد زیر را جایگزین کد های فعلی کنید:

```
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });
```

بعد از قرار دادن کد همانند تصویر، دکمه انتشار را بزنید.

![قرار دادن کد JS داخل وردپرس](https://elementorfa.ir/wp-content/uploads/2020/04/Simple-add-js.png)

حالا به سربرگ سایت رفته و اسکرول کنید. مشاهده می کنید که در صورت اسکرول به سمت پایین، سربرگ مخفی شده و هنگام اسکرول به سمت بالا نمایش داده می شود.

در نهایت ظاهر سربرگ به شکل زیر خواهد شد:



امیدواریم که از این آموزش هم به خوبی استفاده کرده باشید. اگر مشکلی در حین اجرای این آموزش دارید از بخش نظرات مطرح کنید.