Read Time:7 minsLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañol한국어Tiếng ViệtIn this tutorial, we’ll learn how to create a pattern seen on many websites these days: a fixed header which animates to a less obtrusive state as we scroll down the page, We’ll start with the basic structure, then get things working using CSS and pure JavaScript" /> Read Time:7 minsLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañol한국어Tiếng ViệtIn this tutorial, we’ll learn how to create a pattern seen on many websites these days: a fixed header which animates to a less obtrusive state as we scroll down the page, We’ll start with the basic structure, then get things working using CSS and pure JavaScript" />

How to create a fixed header which animates on page scroll

post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="sticky-ad post-promotion-placement">
Read Time:7 minsLanguages: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 khổng lồ 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 lớn touch devices.

You watching: How to create a fixed header which animates on page scroll

To get an idea of what we’re going to lớn build, here’s the kiểm tra (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 sản phẩm, the main menu, và a placeholder button khổng lồ trigger a responsive sầu menu (below 1061px). 

Note: If you click on this button, nothing much will happen. Creating the responsive sầu menu is beyond the scope of this tutorial.

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;.biệu tượng công ty 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-menu 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 sản phẩm has margin-top: 50px và margin-left: 50px. Additionally, we give sầu it padding: 20px 30px.The main thực đơn mirrors the logo, with margin-top: 50px and margin-right: 50px.The responsive liên kết button is hidden. It becomes visible when the viewport width is less than 1061px. Moreover, we mix its top and right margins khổng lồ 10px.We add the transition property khổng lồ 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 và the final state. 

With these rules in place, the header looks lượt thích this:

*
*
*

Animating the Header

So far we’ve 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. Rethành viên that the header has positioned: fixed, and 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 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 lớn calculate it, và then add the corresponding padding to lớn the main element. 

To solve sầu the second task, we’ll vì chưng 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 to 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 to the main element:

var m = document.querySelector("main"), h = document.querySelector("header"), hHeight;function setTopPadding() hHeight = h.offsetHeight; m.style.paddingTop = hHeight + "px";For this demonstration, we use the offsetHeight property to lớn retrieve the header’s height. Keep in mind that we could equally have used the getBoundingClientRect() method. It’s worth mentioning that this method may return fractional values.

See more: Làm Thế Nào Để Sắp Xếp Theo Chữ Cái Trong Excel, Cách Sắp Xếp Tên Theo Thứ Tự Chữ Cái Trong Excel

Now onto the scrolling event:

function onScroll() window.addEventListener("scroll", callbackFunc); function callbackFunc() var y = window.pageYOffset; if (y > 150) h.classList.add("scroll"); else h.classList.remove("scroll"); Here we take advantage of the window’s pageYOffset property khổng lồ calculate the number of pixels that our document has been scrolled vertically. Note that this property doesn’t work in older versions of IE (here.

Then we use the classList property khổng lồ add & remove 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 sầu used the className property khổng lồ manipulate our single class, but in a real-world scenario this might not the igiảm giá khuyến mãi solution (in case we have sầu multiple classes). 

To wrap things up, we điện thoại tư vấn our functions in two different cases:

When the page loadsvà as we rekích cỡ the browser window.

window.onload = function() setTopPadding(); onScroll();;window.onreform size = 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 .hình ảnh padding: 10px 20px; font-size: 1.5rem;.scroll nav align-items: center;.scroll .biểu tượng logo,.scroll ul,.scroll .toggle-menu margin: 0;Specifically, we make the following changes:

Add a light gray box shadow lớn the header.Reduce the logo’s padding and phông kích cỡ.Change the alignment for the flex items across the cross-axis.Remove sầu the margin from the logo sản phẩm, the thực đơn, & the responsive link button.

See more: Cách Thay Đổi Tỉ Lệ Màn Hình Máy Tính Nhanh Chóng, Cách Để Thay Đổi Độ Phân Giải Màn Hình Máy Tính

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 thực đơn và 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.