Tạo menu cố định khi scroll chuột wordpress

Difficulty:BeginnerLength:MediumLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañol한국어Tiếng Việt

In this tutorial, we’ll learn how lớn create a pattern seen on many websites these days: a fixed header which animates to lớn a less obtrusive sầu state as we scroll down the page. We’ll start with the basic structure, then get things working using CSS & pure JavaScript. Before closing, we’ll briefly cover how we can optimize our code as well as discussing challenges present when applying this kind of pattern lớn touch devices.Quý Khách vẫn xem: Cố định header Lúc cuộn trang

To get an idea of what we’re going to build, here’s the chạy thử (you may prefer fullscreen view):

HTML Markup

We’ll start this exercise with the following markup–a header, containing a & a couple of other nested elements:

Logo ☰ The nav element, which is part of the header, contains three elements; the logo, the main menu, và a placeholder button to trigger a responsive thực đơn (below 1061px). 

Note: If you clichồng on this button, nothing much will happen. Creating the responsive sầu thực đơn is beyond the scope of this tutorial.Bạn đã xem: Cố định menu lúc cuộn trang vào wordpress

Initial CSS Styles

Now let’s have a look at some CSS styles khổng lồ get things moving:

header position: fixed; top: 0; width: 100%; padding: 20px; box-sizing: border-box; background: #DD3543;nav display: flex; align-items: flex-end; justify-content: space-between; transition: align-items .2s;.hình ảnh sản phẩm font-size: 2rem; display: inline-block; padding: 20px 30px; background: #F35B66; color: #fff; margin: 50px 0 0 50px; transition: all .2s;ul display: flex; margin: 50px 50px 0 0; padding: 0; transition: margin .2s;li:not(:last-child) margin-right: 20px;li a display: block; padding: 10px 20px;.toggle-thực đơn display: none; font-size: 2rem; color: #fff; margin: 10px 10px 0 0; transition: margin .2s;main display: block; padding: 0 20px;Here’s a brief explanation of the most important rules here:

The header element is a fixed positioned element.We use flexbox to layout the nav element.The logo has margin-top: 50px và margin-left: 50px. Additionally, we give sầu it padding: 20px 30px.The main menu mirrors the logo, with margin-top: 50px and margin-right: 50px.The responsive sầu links button is hidden. It becomes visible when the viewport width is less than 1061px. Moreover, we set its top và right margins to lớn 10px.We add the transition property khổng lồ the elements whose property values will change in the future. In this way, we achieve a smooth transition effect between the initial state và the final state. 

With these rules in place, the header looks like this:

quý khách vẫn xem: Tạo menu cố định và thắt chặt Lúc scroll loài chuột wordpress

Bạn đang xem: Tạo menu cố định khi scroll chuột wordpress


Animating the Header

So far we’ve built the basic structure of our header.

Xem thêm: Hướng Dẫn Cách Recall, Thu Hồi Email Đã Gửi Trong Outlook 2010

It’s now time to discuss the next steps:

The main element should be positioned right underneath the header. Rethành viên that the header has positioned: fixed, và it’s therefore positioned on top of the main element. The header should be animated as we scroll down the page.

To solve sầu the first task, we add a padding-top property khổng lồ the main element. The value of this property should be equal khổng lồ the header’s height. In our case, we haven’t specified a fixed height for our header, so we’ll use some JavaScript khổng lồ calculate it, và then add the corresponding padding lớn the main element. 

To solve the second task, we’ll bởi the following:

Retrieve the number of pixels that the document has already been scrolled vertically.If this number is greater than 150px, we assign the scroll class lớn the header.


Here’s the required JavaScript code–we begin by defining some variables, calculating the height of the header, then adding that value as padding-top to lớn the main element:

Now onlớn the scrolling event:

Then we use the classList property lớn add & remove the scroll class from our header. Not all browsers tư vấn this property however, so if you want to lớn tư vấn any of these you may want khổng lồ look at the classList.js và classie.js polyfills. For this example, we could have sầu used the className property khổng lồ manipulate our single class, but in a real-world scenario this might not the ikhuyến mãi solution (in case we have multiple classes). 

To wrap things up, we Hotline our functions in two different cases:

window.onload = function() setTopPadding(); onScroll();;window.onrekích thước = function() setTopPadding();;


As long as our scrolling exceeds the limit of 150px, a few additional CSS rules take place:

.scroll box-shadow: 0 7px 0 0 rgba(0, 0, 0, .1);.scroll .logo sản phẩm padding: 10px 20px; font-size: 1.5rem;.scroll nav align-items: center;.scroll .hình ảnh,.scroll ul,.scroll .toggle-thực đơn margin: 0;Specifically, we make the following changes:

The aforementioned rules result in this new header layout:


Going Responsive

As we’ve sầu mentioned in a previous section, when the viewport width is less than 1061px, we hide the menu & show the responsive sầu link button (which doesn’t actually bởi anything). Plus, we make a few other changes in the target elements.

Chuyên mục: Domain Hosting