Tạo Menu Cố Định Khi Scroll Chuột Wordpress, Tạo Menu Cố Định Khi Scroll Chuột

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

In this tutorial, we’ll learn how khổng lồ create a pattern seen on many websites these days: a fixed header which animates lớn a less obtrusive 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 to touch devices.quý khách hàng sẽ xem: Cố định header Lúc cuộn trang

To get an idea of what we’re going lớn build, here’s the thử nghiệm (you may prefer fullscreen view):

HTML Markup

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

Logo ☰ The nav element, which is part of the header, contains three elements; the hình ảnh, the main thực đơn, and a placeholder button to lớn trigger a responsive sầu thực đơn (below 1061px).

Note: If you cliông xã on this button, nothing much will happen. Creating the responsive sầu thực đơn is beyond the scope of this tutorial.quý khách hàng đã xem: Cố định thực đơn lúc cuộn trang vào wordpress

Initial CSS Styles

Now let’s have sầu a look at some CSS styles to lớn 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 khổng lồ layout the nav element.The biệu tượng công ty has margin-top: 50px & margin-left: 50px. Additionally, we give it padding: 20px 30px.The main thực đơn mirrors the hình ảnh sản phẩm, with margin-top: 50px and margin-right: 50px.The responsive links button is hidden. It becomes visible when the viewport width is less than 1061px. Moreover, we mix its top & right margins khổng lồ 10px.We add the transition property lớn the elements whose property values will change in the future. In this way, we achieve sầu a smooth transition effect between the initial state & the final state.

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

Bạn đang xem: Tạo thực đơn cố định Khi scroll con chuột wordpress

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

Xem thêm: Truyện Cổ Tích Cô Bé Quàng Khăn Đỏ Tiếng Anh, Little Red Riding Hood (English)
Animating the Header
So far we’ve sầu built the basic structure of our header. It’s now time to discuss the next steps:
The main element should be positioned right underneath the header. Remember that the header has positioned: fixed, & 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 to lớn the main element. The value of this property should be equal lớn the header’s height. In our case, we haven’t specified a fixed height for our header, so we’ll use some JavaScript to calculate it, and then add the corresponding padding khổng lồ the main element.
To solve sầu the second task, we’ll bởi the following:
Retrieve sầu 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.
JavaScript
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 lớn the main element:
Now onkhổng lồ the scrolling event:
Then we use the classList property to lớn add và remove sầu the scroll class from our header. Not all browsers support this property however, so if you want to lớn tư vấn any of these you may want to look at the classList.js and classie.js polyfills. For this example, we could have used the className property to manipulate our single class, but in a real-world scenario this might not the ideal solution (in case we have sầu multiple classes).
To wrap things up, we Hotline our functions in two different cases:
window.onload = function() setTopPadding(); onScroll();;window.onrekích cỡ = function() setTopPadding();;
CSS
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 and show the responsive liên kết button (which doesn’t actually vị anything). Plus, we make a few other changes in the target elements.

HTML Markup

Initial CSS Styles

Animating the Header

JavaScript

CSS

Going Responsive

Bài viết liên quan