Community

Learn

Tools Library

AI Tools

Leisure

English

Home > Web Front-end > JS Tutorial > Scroll up and down the page to change the positioning of the top navigation

Scroll up and down the page to change the positioning of the top navigation

巴扎黑

Release： 2017-07-22 09:22:21

Original

1943 people have browsed it

Recently I encountered a design effect requirement from a designer, which has also been implemented on other websites:

state1: When the web page is scrolled down, the page header bar disappears , the top nav moves up;

state2: When the web page scrolls up, the page header bar appears, and the top nav moves down along the nav.

The page already contains the following functions:

1. When the pop-up window pops up, the pop-up window layer can be scrolled, but the page layer does not allow scrolling. At this time, the overflow style attributes of the body element and html element in the page are set to hidden;

The page structure is as follows:

Header

Previous article：js tab encapsulation tutorial Next article：Summary of key knowledge of vue

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