Home Web Front-end HTML Tutorial How to use getBoundingClientRect() to implement scrolling and fixation of div containers

How to use getBoundingClientRect() to implement scrolling and fixation of div containers

Feb 23, 2018 am 10:25 AM
ie container

This time I will show you how to use getBoundingClientRect() to achieve scrolling and fixing of div containers, and how to use getBoundingClientRect() to achieve scrolling and fixing of div containers. What are the precautions? What are the practical cases? Let’s take a look. take a look.

The method of ele.getBoundingClientRect() is to obtain the position of an element in the entire view window.

The values ​​that can be returned include width, height, top, left, x ,y,right,bottom

Scene

When one of your divs is in the middle of viewport

The effect you want is that when the page scrolls to this div, this div is fixed at the top of the page, Othersscrolling remains unchanged

Idea

Achieved The idea can be to use this method to get the top value of this div

This top value is the top value of this div to the viewport

Listen to the scrolling of the pageEvent Then when this When the top value

to achieve such an effect

I believe you have mastered the method after reading these cases , for more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

What are the differences between the standard writing method of html and the code generated by Dreamweaver

How to add it in html flash video format (flv, swf) files

How to set input to read-only effect through disabled and readonly

The above is the detailed content of How to use getBoundingClientRect() to implement scrolling and fixation of div containers. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1225
24
AtomHub, an open source container mirroring center jointly created by Huawei, Inspur and other units, announced that it is officially open for public testing and can stably download domestic services. AtomHub, an open source container mirroring center jointly created by Huawei, Inspur and other units, announced that it is officially open for public testing and can stably download domestic services. Jan 02, 2024 pm 03:54 PM

According to Huawei’s official news, the Open Atomic Developer Conference, with the theme of “Everything for Developers”, was held in Wuxi for two days, from December 16 to 17. The conference was led by the Open Atomic Open Source Foundation, Huawei, and Inspur. , DaoCloud, Xieyun, Qingyun, Hurricane Engine, as well as the OpenSDV Open Source Alliance, openEuler community, OpenCloudOS community and other member units jointly initiated the construction of the AtomHub Trusted Mirror Center, which is officially open for public testing. AtomHub adheres to the concepts of co-construction, co-governance, and sharing, and aims to provide open source organizations and developers with a neutral, open and co-constructed trusted open source container mirror center. In view of the instability and uncontrollability of image warehouses such as DockerHub, and some

How to install Redhat Podman on Windows 10 or 11 via CMD How to install Redhat Podman on Windows 10 or 11 via CMD Oct 02, 2023 pm 09:33 PM

Install RedHatPodman on Windows 11 or 10 Follow the steps below to install RedHatPodman on your Windows machine using Command Prompt or Powershell: Step 1: Check System Requirements First, you have to make sure that your Windows system is running with the latest updates so that it can meet the requirements to run Podman requirements. You should be using Windows 11 or Windows 10 version 1709 (Build 16299) or higher and you have to enable Windows Subsystem for Linux 2 (WSL2) and VM features, well if they are not activated yet then you can use The two-step command executes this

How to use Docker for container failure recovery and automatic restart How to use Docker for container failure recovery and automatic restart Nov 07, 2023 pm 04:28 PM

As a lightweight virtualization platform based on container technology, Docker has been widely used in various scenarios. In a production environment, high availability and automatic failure recovery of containers are crucial. This article will introduce how to use Docker for container failure recovery and automatic restart, including specific code examples. 1. Configuration of automatic container restart In Docker, the automatic restart function of the container can be enabled by using the --restart option when running the container. Common options are: no: do not automatically restart. silent

Internet Explorer opens Edge: How to stop MS Edge redirection Internet Explorer opens Edge: How to stop MS Edge redirection Apr 14, 2023 pm 06:13 PM

It's no secret that Internet Explorer has fallen out of favor for a long time, but with the arrival of Windows 11, reality sets in. Rather than sometimes replacing IE in the future, Edge is now the default browser in Microsoft's latest operating system. For now, you can still enable Internet Explorer in Windows 11. However, IE11 (the latest version) already has an official retirement date, which is June 15, 2022, and the clock is ticking. With this in mind, you may have noticed that Internet Explorer sometimes opens Edge, and you may not like it. So why is this happening? exist

What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) What should I do if win11 cannot use ie11 browser? (win11 cannot use IE browser) Feb 10, 2024 am 10:30 AM

More and more users are starting to upgrade the win11 system. Since each user has different usage habits, many users are still using the ie11 browser. So what should I do if the win11 system cannot use the ie browser? Does windows11 still support ie11? Let’s take a look at the solution. Solution to the problem that win11 cannot use the ie11 browser 1. First, right-click the start menu and select "Command Prompt (Administrator)" to open it. 2. After opening, directly enter "Netshwinsockreset" and press Enter to confirm. 3. After confirmation, enter "netshadvfirewallreset&rdqu

How to sort C++ STL containers? How to sort C++ STL containers? Jun 02, 2024 pm 08:22 PM

How to sort STL containers in C++: Use the sort() function to sort containers in place, such as std::vector. Using the ordered containers std::set and std::map, elements are automatically sorted on insertion. For a custom sort order, you can use a custom comparator class, such as sorting a vector of strings alphabetically.

What are the common types in C++ STL containers? What are the common types in C++ STL containers? Jun 02, 2024 pm 02:11 PM

The most common container types in C++STL are Vector, List, Deque, Set, Map, Stack and Queue. These containers provide solutions for different data storage needs, such as dynamic arrays, doubly linked lists, and key- and value-based associative containers. In practice, we can use STL containers to organize and access data efficiently, such as storing student grades.

The end of an era: Internet Explorer 11 is retired, here's what you need to know The end of an era: Internet Explorer 11 is retired, here's what you need to know Apr 20, 2023 pm 06:52 PM

June 15, 2022 is the day when Microsoft ends support for Internet Explorer 11 (IE11) and closes its legacy browser chapter. The company has been reminding users of this end-of-life date for some time and calling on them to plan a move to Microsoft Edge. Microsoft bundles IE11 with Windows 8.1 as the modern default web browser for Windows. Although it never reached the (current) heights of Chrome, it was the second most used desktop browser in 2014, behind IE8. Of course, with 20

See all articles