CN112947811A

CN112947811A - Page navigation display method and device, electronic equipment and storage medium

Info

Publication number: CN112947811A
Application number: CN202110209250.6A
Authority: CN
Inventors: 贾茹
Original assignee: Beijing Kingsoft Cloud Network Technology Co Ltd
Current assignee: Beijing Kingsoft Cloud Network Technology Co Ltd
Priority date: 2021-02-24
Filing date: 2021-02-24
Publication date: 2021-06-11

Abstract

The application provides a display method and device for page navigation, an electronic device and a storage medium, wherein the method comprises the following steps: detecting a first trigger operation executed on a target page displayed on a target display window, wherein the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at the position of the navigation bar of the target page, and the first trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window; responding to the first trigger operation, and adjusting the page position displayed in the target display window to be a first page position; and in the case that the first page position is larger than the navigation bar position, displaying the target navigation bar on the first window position of the target display window. By the method and the device, the problems of poor page applicability and poor page content positioning efficiency existing in the page navigation display mode in the related technology are solved.

Description

Page navigation display method and device, electronic equipment and storage medium

Technical Field

The present application relates to the field of computers, and in particular, to a method and an apparatus for displaying a page navigation, an electronic device, and a storage medium.

Background

Currently, a user can look up content of interest by looking at page content in a page. For example, in a product page of a cloud product (cloud technology product), there is generally no product navigation (product page component navigation). Under the condition that the number of products contained in the page is large, a user needs to manually scroll the page to find a specific product (page content), the positioning efficiency of the page content is low, and the use experience of the user is influenced.

The product page of part of cloud product providers comprises product navigation, the product navigation is positioned at a position close to the product page, when the current position exceeds the height of a screen window, a user still needs to manually scroll the page to search for other interested products, the positioning efficiency of page content is low, and the use experience of the user is influenced.

Therefore, the display mode of page navigation in the related art has the problems of poor page applicability and poor page content positioning efficiency.

Disclosure of Invention

The application provides a display method and device of page navigation, electronic equipment and a storage medium, which are used for at least solving the problems of poor page applicability and poor page content positioning efficiency existing in a page navigation display mode in the related technology.

According to an aspect of an embodiment of the present application, there is provided a display method of page navigation, including: detecting a first trigger operation executed on a target page displayed on a target display window, wherein the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at a navigation bar position of the target page, and the first trigger operation is used for triggering and adjusting a page position of the target page displayed in the target display window; responding to the first trigger operation, and adjusting the page position displayed in the target display window to be a first page position; and under the condition that the first page position is larger than the position of the navigation bar, displaying the target navigation bar on a first window position of the target display window.

Optionally, adjusting the page position displayed in the target display window to the first page position includes: determining a component position of a first component matched with a first navigation item in the plurality of components under the condition that the first trigger operation is a selection operation of the first navigation item on the target navigation bar; and positioning according to the component position of the first component, and adjusting the page position displayed on the target display window to the first page position, wherein the first page position is the position determined by the component position of the first component.

Optionally, positioning according to the component position of the first component, and adjusting the page position displayed on the target display window to the first page position includes: determining a difference between a component position of the first component and a height of the target navigation bar as the first page position; and controlling a scroll bar of the target page to scroll within a first time length according to the first page position so as to adjust the page position displayed on the target display window to the first page position.

Optionally, adjusting the page position displayed in the target display window to the first page position includes: determining a page scrolling parameter corresponding to the page scrolling operation under the condition that the first triggering operation is the page scrolling operation of the target page, wherein the page scrolling parameter is used for controlling the scrolling distance of a scroll bar of the target page; and controlling the scroll bar to scroll for a second scroll distance according to the page scroll parameter so as to adjust the position of the page displayed in the target display window to be the first page position.

Optionally, after adjusting the page position displayed in the target display window to the first page position, the method further includes: acquiring a second component matched with the first page position from the plurality of components according to the first page position and the component position of each component in the plurality of components; updating the display state of a second navigation item matched with the second component on the target navigation bar to be the selected state.

Optionally, after displaying the target navigation bar at the first window position of the target display window, the method further includes: detecting a position adjusting operation performed on the target navigation bar, wherein the position adjusting operation is used for adjusting the display position of the target navigation bar on the target display window to a second window position; and responding to the position adjustment operation, and displaying the target navigation bar on the second window position of the target display window.

Optionally, after detecting the first trigger operation performed on the target page displayed on the target display window, the method further includes: detecting a second trigger operation executed on the target page, wherein the second trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window; and under the condition that the time interval between the second trigger operation and the first trigger operation is smaller than a target time interval, responding to the second trigger operation after the target time interval is separated from the first trigger operation, and adjusting the page position displayed in the target display window to be a second page position.

According to another aspect of the embodiments of the present application, there is provided a display apparatus for page navigation, including: the device comprises a first detection unit, a second detection unit and a display unit, wherein the first detection unit is used for detecting a first trigger operation executed on a target page displayed on a target display window, the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at the position of the navigation bar of the target page, and the first trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window; the first adjusting unit is used for adjusting the page position displayed in the target display window to a first page position in response to the first trigger operation; and the first display unit is used for displaying the target navigation bar on a first window position of the target display window under the condition that the first page position is larger than the navigation bar position.

Optionally, the first adjusting unit includes: a first determining module, configured to determine, when the first trigger operation is a selection operation of a first navigation item on the target navigation bar, a component position of a first component, which is matched with the first navigation item, in the multiple components; and the positioning module is used for positioning according to the component position of the first component and adjusting the page position displayed on the target display window to the first page position, wherein the first page position is the position determined by the component position of the first component.

Optionally, the first adjusting module includes: a determining submodule, configured to determine a difference between a component position of the first component and a height of the target navigation bar as the first page position; and the control sub-module is used for controlling the scroll bar of the target page to scroll within a first time length according to the first page position so as to adjust the page position displayed on the target display window to the first page position.

Optionally, the first adjusting unit includes: a second determining module, configured to determine, when the first trigger operation is a page scroll operation of the target page, a page scroll parameter corresponding to the page scroll operation, where the page scroll parameter is used to control a scroll distance of a scroll bar of the target page; and the control module is used for controlling the scroll bar to scroll for a second scroll distance according to the page scroll parameter so as to adjust the position of the page displayed in the target display window to the first page position.

Optionally, the apparatus further comprises: a matching unit, configured to, after adjusting a page position displayed in the target display window to the first page position, obtain, from the plurality of components, a second component that matches the first page position according to the first page position and a component position of each of the plurality of components; and the updating unit is used for updating the display state of a second navigation item matched with the second component on the target navigation bar into a selected state.

Optionally, the apparatus further comprises: a second detecting unit, configured to detect a position adjusting operation performed on the target navigation bar after the target navigation bar is displayed at the first window position of the target display window, where the position adjusting operation is used to adjust a display position of the target navigation bar on the target display window to a second window position; and the second display unit is used for responding to the position adjustment operation and displaying the target navigation bar on the second window position of the target display window.

Optionally, the apparatus further comprises: a third detecting unit, configured to detect a second trigger operation performed on the target page after detecting the first trigger operation performed on the target page displayed on the target display window, where the second trigger operation is used to trigger adjustment of a page position of the target page displayed in the target display window; and the second adjusting unit is used for responding to the second trigger operation after the target time interval is separated from the first trigger operation when the time interval between the second trigger operation and the first trigger operation is smaller than the target time interval, and adjusting the page position displayed in the target display window to be a second page position.

According to another aspect of the embodiments of the present application, there is also provided an electronic device, including a processor, a communication interface, a memory, and a communication bus, where the processor, the communication interface, and the memory communicate with each other through the communication bus; wherein the memory is used for storing the computer program; a processor for performing the method steps in any of the above embodiments by running the computer program stored on the memory.

According to a further aspect of the embodiments of the present application, there is also provided a computer-readable storage medium, in which a computer program is stored, wherein the computer program is configured to perform the method steps of any of the above embodiments when the computer program is executed.

In the embodiment of the application, a mode of flexibly adjusting the display position of a navigation bar according to the position of a page displayed in a display window is adopted, and a first trigger operation executed on a target page displayed on the target display window is detected, wherein the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at the position of the navigation bar of the target page, and the first trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window; responding to the first trigger operation, and adjusting the page position displayed in the target display window to be a first page position; under the condition that the position of the first page is larger than the position of the navigation bar, the target navigation bar is displayed at the position of the first window of the target display window, and when the position of the page displayed in the display window is larger than the position of the navigation bar, the navigation bar is controlled to be displayed at the specific position of the display window (for example, ceiling-mounted display), so that the purpose of facilitating a user to use the navigation bar to position the display position of the page can be realized, the technical effects of improving the applicability of the display mode of page navigation to different pages and improving the positioning efficiency of page content are achieved, and the problems of poor page applicability and poor positioning efficiency of page content existing in the display mode of page navigation in the related technology are solved.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the invention and together with the description, serve to explain the principles of the invention.

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious for those skilled in the art that other drawings can be obtained according to the drawings without inventive exercise.

FIG. 1 is a diagram illustrating a hardware environment for an alternative page navigation display method according to an embodiment of the present invention;

FIG. 2 is a flowchart illustrating an alternative page navigation display method according to an embodiment of the present application;

FIG. 3 is a schematic diagram of an alternative display method for page navigation according to an embodiment of the present application;

FIG. 4 is a schematic diagram of another alternative display method for page navigation according to an embodiment of the present application;

FIG. 5 is a schematic flow chart diagram illustrating an alternative display method for page navigation according to an embodiment of the present application;

FIG. 6 is a flowchart illustrating a display method of another alternative page navigation according to an embodiment of the present application;

FIG. 7 is a block diagram of an alternative display device for page navigation according to an embodiment of the present application;

fig. 8 is a block diagram of an alternative electronic device according to an embodiment of the present application.

Detailed Description

In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

It should be noted that the terms "first," "second," and the like in the description and claims of this application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the application described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

First, partial nouns or terms appearing in the description of the embodiments of the present application are applicable to the following explanations:

1. JavaScript: scripting programming languages support the development of client-side and server-side components of Web (World Wide Web, also known as the World Wide Web) applications. At the client, JavaScript can be used to compose a program that the Web browser executes in the context of a Web page, and at the server, JavaScript can be used to compose a page that processes information submitted by the Web browser and updates the browser's display accordingly.

2. Css (nesting styles sheets): the term "cascading style sheet" refers to a computer Language for expressing a file style such as HTML (HyperText Markup Language) or XML (EXtensible Markup Language). The CSS can not only statically modify the web page, but also dynamically format elements of the web page in cooperation with various scripting languages.

3. JQUERY: is a fast and compact JavaScript framework (JavaScript code library).

According to one aspect of the embodiment of the application, a display method for page navigation is provided. Alternatively, in this embodiment, the above-mentioned display method of page navigation may be applied to a hardware environment formed by the terminal 102 and the server 104 as shown in fig. 1. As shown in fig. 1, the server 104 is connected to the terminal 102 through a network, and may be configured to provide services (e.g., game services, application services, etc.) for the terminal or a client installed on the terminal, and may be configured with a database on the server or separately from the server, and configured to provide data storage services for the server 104.

The network includes, but is not limited to, at least one of: a wired network, a wireless network, which may include, but is not limited to, at least one of: a wide area network, a metropolitan area network, or a local area network, which may include, but is not limited to, at least one of: bluetooth, WIFI (Wireless Fidelity), and other networks that enable Wireless communication. The terminal 102 may be a terminal for computing data, such as a mobile terminal (e.g., a mobile phone, a tablet computer), a notebook computer, a PC, and the like. The server may include, but is not limited to, any hardware device capable of performing computations.

The display method of the page navigation in the embodiment of the present application may be executed by the server 104, or may be executed by the terminal 102, or may be executed by both the server 104 and the terminal 102. The display method for the terminal 102 to execute the page navigation in the embodiment of the present application may also be executed by a client installed thereon.

Taking the display method of the page navigation in the embodiment executed by the terminal 102 as an example, fig. 2 is a schematic flow chart of a display method of the optional page navigation according to the embodiment of the present application, and as shown in fig. 2, the flow of the method may include the following steps:

step S202, a first trigger operation performed on a target page displayed on a target display window is detected, where the target page includes a plurality of components and a target navigation bar of the plurality of components, the target navigation bar is located at a navigation bar position of the target page, and the first trigger operation is used to trigger adjustment of a page position of the target page displayed in the target display window.

The page navigation display method provided in this embodiment may be applied to a scene in which page content of a page is displayed through a display window. The page may be a page in a web page, a page in an application client installed on the terminal, or a page in a display window of another type. The page may be a page based on some programming language, for example, a page written in JavaScript. In this embodiment, the type of the display window and the programming language used for page writing are not limited.

The target page may be one displayed in a target display window on the screen of the target terminal device. The target terminal device is a device used by the target user. The display method of the page navigation in this embodiment may be executed by the target terminal device.

The target page comprises a target navigation bar containing a plurality of components and a plurality of components, each of the plurality of components corresponds to a navigation item (navigation entry) on the target navigation bar, and each navigation item can be used for positioning the corresponding component in the plurality of components. Each of the multiple components refers to a content item in one area of the target page, that is, by splicing the multiple components, a main body part of the target page can be obtained.

The target page may be a page for information display, and various kinds of information may be contained in the target page. Alternatively, the target page may be an object page (e.g., a product page) of at least one object (e.g., a cloud product). The content items displayed in each component may be object content of at least one object or associated content of at least one object. In this embodiment, a product page in which a target page is a cloud product is taken as an example for description, and the page navigation display method in this embodiment is also applicable to other pages obtained by splicing a plurality of components.

The target navigation bar is located at the navigation bar position of the target page, and the navigation bar position is a page position configured for the target navigation bar in the target page and is generally located at the upper position of the target page. The navigation bar position may be the position of a particular point on the navigation bar, and the other positions of the target navigation bar may be determined in relation to the particular point. The target navigation bar may be a square area, e.g., a bar area parallel to the upper boundary of the target page, in which case the navigation bar position may be the displacement height of the relative offset of the target navigation bar in the target page, e.g., the distance between the upper boundary of the target navigation bar and the upper boundary of the target page.

For example, the navigation bar may be represented by a navigation height of the navigation bar and a position of the navigation bar (navigation bar position, which may be a displacement height of a relative offset of the navigation bar in the web page). As shown in FIG. 3, when the user first enters the product page, the navigation height in the current web page is obtained, e.g., 50px (height of 50 pixels). In addition, the displacement height of the relative offset of the navigation bar in the web page, that is, the height of the position where the current navigation is located, can also be obtained through JavaScript, for example: 400px (height of 400 pixels).

Similarly, each of the plurality of components corresponds to a component region in the target page, and the component region may be represented by a component height and a component position, which refers to a displacement height of a relative offset of the component in the target web page. The component heights of the different components may be the same or different. The component locations of the different components are typically different.

The total page height of a page may be determined according to the content it contains, which is not a fixed value, i.e. the total page height may be different for different pages. The content that the target display window can display is limited, for example, page content having a height value at most equal to the window height of the target display window (i.e., screen window height) is displayed.

The target user can adjust the page content displayed in the target display window, that is, the page position of the target page displayed in the target display window, by operating the target terminal device. The page position may be a position of a page region displayed by the target page in the target display window, and may be a displacement height of a relative offset of the displayed page region in the target page, for example, a dotted line in fig. 3 is a page region displayed by the target page in the target display window, and the displayed page position is a distance between an upper boundary of the page region and an upper boundary of the target page.

The target terminal device may detect a first trigger operation performed on the target page, where the first trigger operation may be used to trigger adjustment of a page position of the target page displayed in the target display window. The first trigger operation (the second trigger operation described below is similar to this) may be a touch operation performed on a screen (touch screen) of the target terminal device, may be a voice instruction detected by a voice input component (e.g., a microphone array), may be an air-break operation acquired by an image acquisition component (or a sensor component), and may also be a trigger operation detected by another detection component, which is not limited in this embodiment.

For example, when a user performs a mouse scroll operation in a product page or clicks a navigation bar trigger event, a page position of a target page displayed on a target display window may be changed.

Step S204, responding to the first trigger operation, and adjusting the page position displayed in the target display window to be the first page position.

In response to the first trigger operation, the target terminal device may adjust the page position displayed in the target display window from the current page position to the first page position. The current page position refers to a current position of the target page displayed in the target display window when the first trigger operation is detected. After the first page position is adjusted, the current position of the target page displayed in the target display window is the first page position.

The adjustment operation may be a direct jump process, for example, a jump of the page position displayed in the target display window from the current page position to the first page position directly. Alternatively, the adjustment operation may be a jump transition process, for example, a transition from the current page position to the first page position through a page animation within the target duration of time. In this embodiment, the manner of adjusting the displayed page position is not limited.

It should be noted that, if the total page height of the target page is less than or equal to the page height allowed to be displayed in the target display window, the target terminal device may not allow the page position of the target page displayed in the target display window to be triggered and adjusted through a triggering operation (e.g., the first triggering operation).

In step S206, the target navigation bar is displayed at the first window position of the target display window when the first page position is greater than the navigation bar position.

And under the condition that the position of the first page is larger than the position of the navigation bar, if the display position of the navigation bar is not adjusted, at most part of the target navigation bar can be displayed in the target display window, or the target navigation bar can not be displayed completely. In this case, the page area of the target page displayed in the target display window does not include the complete target navigation bar, and the target navigation bar may not play a role in navigation and positioning.

In order to ensure that a user can perform component positioning through the target navigation bar so as to improve convenience of page content positioning, the target terminal device may display the target navigation bar at a first window position of the target display window. The first window position may be a position in the target display window that does not affect the target page display or has a small impact on the target page display, for example, the target navigation bar may be displayed on top, on the left side, on the right side, and on the bottom. The first display position is not limited in this embodiment.

Considering that the navigation bar is generally displayed over the component area of the plurality of components, if the page position displayed in the target display window is less than or equal to the navigation bar position, the target terminal device may control the target navigation bar to be displayed at the configured navigation bar position.

In order to avoid discontinuous acquisition of visual information caused by jumping of the display position of the target navigation bar, the target navigation bar can be controlled to be displayed in the target display window in a top-suction manner under the condition that the position of the first page is greater than the position of the navigation bar, namely, the target navigation bar is displayed at the top position of the target display window.

Optionally, after the target navigation bar is displayed at the first window position of the target display window, detecting a third trigger operation executed on the target page, where the third trigger operation is used to trigger adjustment of a page position of the target page displayed in the target display window; responding to a third trigger operation, and adjusting the page position displayed in the target display window to a third page position; and in the case that the third page position is less than or equal to the navigation bar position, displaying the target navigation bar on the navigation bar position.

As an alternative example, two layout styles may be configured for the navigation bar, one is a top-up display and one is displayed in terms of relative positions in the page, wherein the top-up display may be implemented with CSS properties. If the height of the current position is larger than the height of product navigation (the position of the navigation bar), the layout style displayed by the ceiling can be adopted to be displayed at the top of the browser, and then the switching between the two layout styles of the navigation bar can be carried out.

For example, it may be configured that in the case where the current position exceeds the height of the screen window, the navigation bar is displayed on the top of the browser. The height of the position where the navigation bar is located is 400px, and if the height of the currently displayed position is 1600px, the navigation can be displayed by adopting a style displayed at the top of the browser; if the page is now scrolled to 200px of position height, the navigation may switch back to the default relative positioning layout style.

Through the steps S202 to S206, detecting a first trigger operation performed on a target page displayed on a target display window, where the target page includes a plurality of components and a target navigation bar of the plurality of components, the target navigation bar is located at a navigation bar position of the target page, and the first trigger operation is used to trigger adjustment of a page position of the target page displayed in the target display window; responding to the first trigger operation, and adjusting the page position displayed in the target display window to be a first page position; under the condition that the position of the first page is larger than the position of the navigation bar, the target navigation bar is displayed at the position of the first window of the target display window, so that the problems of poor page applicability and poor page content positioning efficiency existing in the page navigation display mode in the related technology are solved, the applicability of the page navigation display mode to different pages is improved, and the page content positioning efficiency is improved.

As an alternative embodiment, adjusting the page position displayed within the target display window to the first page position comprises:

s11, determining the component position of a first component matched with a first navigation item in the multiple components under the condition that the first trigger operation is the selection operation of the first navigation item on the target navigation bar;

and S12, positioning according to the component position of the first component, and adjusting the page position displayed on the target display window to be a first page position, wherein the first page position is the position determined by the component position of the first component.

The first trigger operation may be a selection operation (e.g., a click operation) of a first navigation item on the target navigation bar. The target user may navigate to the intended component content of the target user by performing a selection operation on the first navigation item to trigger component content positioning.

After the selection operation of the first navigation item is detected, the target terminal device may acquire the navigation item identifier of the first navigation item. According to the corresponding relation between the navigation item identification and the component identification, the target terminal device can determine the component identification of the first component corresponding to the navigation item identification of the first navigation item, and further determine the component position of the first component.

The component position of the first component is a position of the component area of the first component on the target page, and similar to the navigation bar position of the target navigation bar, the component position of the first component may be a position of a specific point in the component area of the first component, or may also be an offset height of a relative offset thereof in the target page, which is not limited in this embodiment.

The target terminal device may adjust a page position displayed on the target display window to a first page position according to the component position of the first component, where the first page position may be a position determined by the component position of the first component, may be the component position of the first component, and may also be a page position smaller than the component position of the first component.

For example, as shown in fig. 4, when the user clicks the navigation entry content (navigation item 3) of the product page, a single-click event is triggered, the component region corresponding to the clicked navigation item can be located, and the page region displayed in the display window will jump to the page region within the dashed box in fig. 4. If the component area of the component 3 and the page area below the component area are not enough to fill one screen, the page content can be displayed according to the condition that one screen is not full (the non-full content can be blank), and the page content of the target page from the bottom to the top can also be displayed.

Through the embodiment, the component area is positioned by responding to the detected selection operation of the navigation item, and the convenience of positioning the page display position can be realized.

As an alternative embodiment, the positioning according to the component position of the first component, and the adjusting the page position displayed on the target display window to the first page position includes:

s21, determining the difference between the component position of the first component and the height of the target navigation bar as a first page position;

and S22, controlling the scroll bar of the target page to scroll within a first time length according to the first page position so as to adjust the page position displayed on the target display window to the first page position.

The target navigation bar has a certain height (navigation height), and if the target navigation bar is controlled to perform ceiling-up display (the first display position is the top position of the target display window), in order to ensure the integrity of the displayed component area of the first component, the difference between the component position of the first component and the height (navigation height) of the target navigation bar may be determined as the first page position.

For example, the positioning of the component area may be implemented by using positioning of JavaScript, and the implementation manner may be: matching the ID of the navigation item triggered by the user with the ID of the product content, and after the matching is successful, calculating and setting the vertical position of the scroll bar of the matched product, for example, the displacement height of the matched target is as follows: 1600px, since the navigation height of the navigation bar is 50px, was located at a height position of 1550px (1600px-50 px).

After obtaining the first page position, the target terminal device may adjust a page area displayed in the target display window according to the first page position. The operation of adjusting the page display position may be performed by controlling the navigation bar to scroll. The target terminal device may control the scroll bar of the target page to scroll within a first time period according to the first page position, may configure a scroll distance of the scroll bar according to the first page position and the current page position, and control the scroll distance of the scroll bar configured by scrolling within the first time period, so as to adjust the page position displayed on the target display window to the first page position.

For example, if the vertical position of the scroll bar of the matched product is directly set, the page is immediately positioned to the current product position, and the visual information acquired by the user is inconsistent, so that the visual experience of the user is affected. In order to improve the consistency of the visual information acquired by the user, when positioning is performed, the scrolling animation effect of the CSS self-defined page can be utilized, and the duration of the animation effect for positioning the target product content can be as follows: for 1 second.

It should be noted that the target navigation bar is displayed on the target page, the target navigation bar may block a small page area (height is navigation height) above the component area of the first component, and what is displayed in the target display window is the effect of continuous display of the target navigation bar and the component area of the first component.

By the embodiment, the difference value between the component position of the first component and the height of the target navigation bar is determined as the first page position, so that the display integrity of the component area can be ensured; the target page is controlled to roll by controlling the rolling bar to roll within a period of time, so that the consistency of the visual information acquired by the user is improved.

s31, determining a page scrolling parameter corresponding to the page scrolling operation under the condition that the first trigger operation is the page scrolling operation of the target page, wherein the page scrolling parameter is used for controlling the scrolling distance of a scroll bar of the target page;

and S32, controlling the scroll bar to scroll for a second scroll distance according to the page scroll parameter so as to adjust the position of the page displayed in the target display window to be the first page position.

The first trigger operation may be a page scroll operation of the target page, for example, by sliding a mouse, a touch screen, or a specific spaced gesture operation. The target user may trigger page scrolling by performing a page scrolling operation on the target page, thereby triggering scrolling up or down from the current location to other locations.

After detecting the page scrolling operation, the target terminal device may obtain a page scrolling parameter corresponding to the page scrolling operation, and the page scrolling parameter may be used to control a distance of the target page scrolling, and may include, but is not limited to, at least one of: scrolling direction, scrolling speed, scrolling time.

The target terminal device can control the scroll bar to scroll according to the page scroll parameter so as to control the displayed target page to scroll. The scrolling distance of the scroll bar is the second scrolling distance, and correspondingly, the page position displayed in the target display window is scrolled by the corresponding distance, so that the page position displayed in the target display window is adjusted to be the first page position.

According to the embodiment, the page area displayed in the display window is controlled to be scrolled through page scrolling operation, so that the flexibility of page positioning can be improved.

As an alternative embodiment, after adjusting the page position displayed in the target display window to the first page position, the method further includes:

s41, acquiring a second component matched with the first page position from the plurality of components according to the first page position and the component position of each component in the plurality of components;

and S42, updating the display state of the second navigation item matched with the second component on the target navigation bar into the selected state.

Under the condition that the page position displayed in the target display window is controlled to be scrolled through scrolling operation, the current position of the target page displayed in the target display window is changed, the target navigation bar (navigation item in the target navigation bar) can be controlled to be linked, and the target navigation bar can be controlled to be linked whether the target navigation bar is scrolled upwards or downwards.

According to the first page position and the component position of each of the plurality of components, the target terminal device may acquire a second component matching the first page position from the plurality of components. According to different positions of the first window, different matching modes can be adopted to determine the second component.

As an alternative embodiment, if the target navigation bar is controlled to be displayed on the non-top portion of the target display window in the case where the first page position is greater than the navigation bar position, a second component matching the first page position may be obtained from the plurality of components according to the first page position and the component position of each of the plurality of components, the first page position being within the component region of the second component, that is, the first page position is greater than or equal to the component position of the second component and is less than the component position of the next component of the second component.

As another alternative, if the target navigation bar is controlled to be displayed on the top of the target display window in the case that the first page position is greater than the navigation bar position, a second component matching the first page position may be obtained from the plurality of components according to the first page position, the height of the target navigation bar, and the component position of each of the plurality of components, where the sum of the first page position and the height of the target navigation bar is located within the component area of the second component, that is, the sum of the first page position and the height of the target navigation bar is greater than or equal to the component position of the second component and is less than the component position of the next component of the second component.

After determining the second component, the target terminal device may determine a second navigation item matching the second component from among the plurality of navigation items in the target navigation bar, and update a display state of the second navigation item to a selected state. The effects displayed in the target display window are as follows: the navigation item corresponding to the most forward component among the components displayed in the target display window is displayed in the selected state.

For example, when a user performs a scrolling operation in a webpage, the user slides to a content area of a different product, determines which product content area the current position belongs to through height calculation, and switches the style of the selected effect of the navigation item, thereby realizing the linkage effect of the navigation bar. For example, if the current location is 1600px and the ID of the current product content is the target ID, the module in the navigation bar corresponding to the target ID is displayed as being selected.

Through the embodiment, the target navigation bar is controlled to be linked with the page in a rolling mode, so that a user can conveniently know the currently displayed navigation item, and the convenience of information acquisition is improved.

As an alternative embodiment, after displaying the target navigation bar at the first window position of the target display window, the method further includes:

s51, detecting a position adjusting operation executed on the target navigation bar, wherein the position adjusting operation is used for adjusting the display position of the target navigation bar on the target display window to a second window position;

and S52, responding to the position adjustment operation, and displaying the target navigation bar on the second window position of the target display window.

The position of the target navigation bar may be altered by the operation performed thereon. The target user may perform a position adjustment operation, e.g., a drag operation, a click operation, on the target navigation bar to adjust the display position of the target navigation bar on the target display window to the second window position.

The target terminal device may detect a position adjustment operation performed on the target navigation bar, and display the target navigation bar at a second window position of the target display window in response to the position adjustment operation. The colleagues displaying the target navigation bar on the second window position may simultaneously adjust the display manner of the target navigation bar, for example, the navigation items may be arranged in a line when the navigation bar is at the top or top, and the navigation items may be arranged in a column when the navigation bar is at the left or right side, which is not limited in this embodiment.

For example, the user may drag the navigation bar, dragging it from the top to the bottom, the navigation bar becoming displayed at the bottom in the display window.

Through this embodiment, through adjusting the display position of navigation bar according to the position adjustment operation that detects, can improve the flexibility that the navigation was shown, improve user's use and experience.

As an alternative embodiment, after detecting the first trigger operation performed on the target page displayed on the target display window, the method further includes:

s61, detecting a second trigger operation executed on the target page, wherein the second trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window;

s62, when the time interval between the second trigger operation and the first trigger operation is smaller than the target time interval, adjusting the page position displayed in the target display window to a second page position in response to the second trigger operation after the target time interval from the first trigger operation.

In order to avoid the problems of large terminal performance consumption and page jamming caused by frequent triggering of the scrolling event, the operation frequency of the scrolling operation can be controlled to optimize the triggering event and improve the response efficiency. The scroll event may be a scroll event triggered by selecting a navigation item, or a scroll event triggered by scrolling a page, which is not limited in this embodiment.

For example, when a user performs a page scrolling operation, a scrolling event is frequently triggered, so that performance consumption is increased, and a page is stuck.

After the first trigger operation, the target terminal device detects a second trigger operation executed on the target page, and the second trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window. The target terminal device may determine a time interval between the first trigger operation and the second trigger operation, and determine an opportunity to respond to the second trigger operation based on a relationship between the determined time interval and the target time interval.

If the time interval between the second trigger operation and the first trigger operation is greater than or equal to the target time interval, the target terminal device may respond to the second trigger operation and directly adjust the page position displayed in the target display window to the second page position.

If the time interval between the second trigger operation and the first trigger operation is smaller than the target time interval, the target terminal device may wait for a certain time, and adjust the page position displayed in the target display window to the second page position in response to the second trigger operation after the target time interval from the first trigger operation.

For example, a double-scroll event may be configured to be triggered at least 300 ms apart, where the execution time of the scroll event is 100 ms, the waiting time interval is 200 ms, i.e., 100 ms triggers a single scroll event, and after the execution of the single scroll event is completed, the scroll event is triggered again when the execution time interval of 200 ms is reached.

Through the embodiment, the operation frequency of the scroll operation is controlled to optimize the trigger event, so that the response efficiency can be improved, and the terminal performance consumption caused by frequently triggering the scroll event is reduced.

The following explains a display method of page navigation in the embodiment of the present application with reference to an optional example. In this example, the target page is a product page of a cloud product, and the target navigation bar is a navigation bar; and when the current position of the page in the display window is greater than the navigation position, the navigation bar is displayed in the display window in a top-suction manner.

The display method of the page navigation in this example may be applied to a scene in which the user clicks the navigation operation and a scene in which the user performs the page scrolling operation. For the user, the user can directly match own intention products through product navigation, for example, the position of the target product is quickly positioned by clicking navigation items in a navigation bar; the user can also find own intended products in a page scrolling mode, and after the content of the products exceeds one screen, product navigation can be displayed on the top of the browser, so that the user can conveniently check the current product position and perform other operations.

For the scenario of the user clicking the navigation operation, as shown in fig. 5, the flow of the display method of page navigation in this optional example may include the following steps:

step S502, the user clicks the navigation operation.

In step S504, a navigation height and a current position are obtained, where the navigation height may be a height of the navigation bar (e.g., 50px), and the current position may be: a difference between the component position and the navigation height of the specific component corresponding to the clicked navigation item.

Step S506, judging whether the current position is larger than the navigation position, if so, executing step S508, otherwise, executing step S510.

And step S508, determining the navigation bar to perform ceiling-mounted display.

Step S510, determining the navigation bar to display the relative position.

Step S512, anchor point positioning, which can be used to realize positioning of the corresponding component position by the navigation bar.

And step S514, displaying a transition animation effect, and finishing positioning, wherein the animation effect can be a page rolling animation effect realized by using the CSS.

For a scenario where the user performs a page scrolling operation, as shown in fig. 6, the flow of the display method of page navigation in this alternative example may include the following steps:

in step S602, the user performs a page scroll operation.

Step S604, acquiring the navigation height and the current position, wherein the current position is the position to which the current page is scrolled.

Step S606, determining whether the current position is greater than the navigation position, if so, executing step S608, otherwise, executing step S610.

Step S608, determining that the navigation bar is displayed on the ceiling.

Step S610, determining the navigation bar to perform relative position display.

In step S612, a function triggers a scroll (scroll) event, by which a frequency of controlling a user operation can be triggered.

Step S614, matching the current position with the content area ID, determining which product content area the current position belongs to (i.e. determining which product is currently located according to the height of the product in the web page), and further matching the corresponding navigation item.

And step S616, controlling the matched navigation item to be in a selected state so as to enable the selected state of the product name corresponding to the page navigation to follow the change.

By the example, the JavaScript technology can be combined with a real scene to realize the product navigation bidirectional linkage of the page (downward rolling has a linkage effect, and upward rolling also has a linkage effect) so as to achieve the technical effects of reducing the use cost of a user and improving the user experience.

It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present application is not limited by the order of acts described, as some steps may occur in other orders or concurrently depending on the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.

Through the above description of the embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but the former is a better implementation mode in many cases. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which is stored in a storage medium (e.g., a ROM (Read-Only Memory)/RAM (Random Access Memory), a magnetic disk, an optical disk) and includes several instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the methods according to the embodiments of the present application.

According to another aspect of the embodiment of the present application, there is also provided a display apparatus for page navigation for implementing the display method for page navigation. Fig. 7 is a block diagram of a display device for optional page navigation according to an embodiment of the present application, and as shown in fig. 7, the display device may include:

a first detecting unit 702, configured to detect a first trigger operation performed on a target page displayed on a target display window, where the target page includes multiple components and a target navigation bar of the multiple components, the target navigation bar is located at a navigation bar position of the target page, and the first trigger operation is used to trigger adjustment of a page position of the target page displayed in the target display window;

a first adjusting unit 704, connected to the first detecting unit 702, configured to adjust a page position displayed in the target display window to a first page position in response to a first trigger operation;

and a first display unit 706 connected to the first adjusting unit 704, for displaying the target navigation bar at the first window position of the target display window if the first page position is greater than the navigation bar position.

It should be noted that the first detecting unit 702 in this embodiment may be configured to execute the step S202, the first adjusting unit 704 in this embodiment may be configured to execute the step S204, and the first displaying unit 706 in this embodiment may be configured to execute the step S206.

The method comprises the steps that a first trigger operation executed on a target page displayed on a target display window is detected through the modules, wherein the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at the position of the navigation bar of the target page, and the first trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window; responding to the first trigger operation, and adjusting the page position displayed in the target display window to be a first page position; under the condition that the position of the first page is larger than the position of the navigation bar, the target navigation bar is displayed at the position of the first window of the target display window, so that the problems of poor page applicability and poor page content positioning efficiency existing in the page navigation display mode in the related technology are solved, the applicability of the page navigation display mode to different pages is improved, and the page content positioning efficiency is improved.

As an alternative embodiment, the first adjusting unit 704 includes:

the first determination module is used for determining the component position of a first component matched with a first navigation item in the multiple components under the condition that the first trigger operation is the selection operation of the first navigation item on the target navigation bar;

and the positioning module is used for positioning according to the component position of the first component and adjusting the page position displayed on the target display window to be the first page position, wherein the first page position is the position determined by the component position of the first component.

As an alternative embodiment, the first adjusting module includes:

the determining submodule is used for determining the difference value between the component position of the first component and the height of the target navigation bar as a first page position;

and the control submodule is used for controlling the scroll bar of the target page to scroll within a first time length according to the first page position so as to adjust the page position displayed on the target display window to the first page position.

As an alternative embodiment, the first adjusting unit 704 includes:

the second determining module is used for determining a page scrolling parameter corresponding to the page scrolling operation under the condition that the first triggering operation is the page scrolling operation of the target page, wherein the page scrolling parameter is used for controlling the scrolling distance of a scroll bar of the target page;

and the control module is used for controlling the scroll bar to scroll for a second scroll distance according to the page scroll parameter so as to adjust the page position displayed in the target display window to be the first page position.

As an alternative embodiment, the apparatus further comprises:

the matching unit is used for acquiring a second component matched with the first page position from the plurality of components according to the first page position and the component position of each component in the plurality of components after the page position displayed in the target display window is adjusted to the first page position;

and the updating unit is used for updating the display state of the second navigation item matched with the second component on the target navigation bar into the selected state.

As an alternative embodiment, the apparatus further comprises:

the second detection unit is used for detecting the position adjustment operation executed on the target navigation bar after the target navigation bar is displayed on the first window position of the target display window, wherein the position adjustment operation is used for adjusting the display position of the target navigation bar on the target display window to be a second window position;

and the second display unit is used for responding to the position adjustment operation and displaying the target navigation bar on a second window position of the target display window.

As an alternative embodiment, the apparatus further comprises:

the third detection unit is used for detecting a second trigger operation executed on the target page after detecting the first trigger operation executed on the target page displayed on the target display window, wherein the second trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window;

and the second adjusting unit is used for responding to the second trigger operation after the target time interval is separated from the first trigger operation under the condition that the time interval between the second trigger operation and the first trigger operation is smaller than the target time interval, and adjusting the page position displayed in the target display window to be the second page position.

It should be noted here that the modules described above are the same as the examples and application scenarios implemented by the corresponding steps, but are not limited to the disclosure of the above embodiments. It should be noted that the modules described above as a part of the apparatus may be operated in a hardware environment as shown in fig. 1, and may be implemented by software, or may be implemented by hardware, where the hardware environment includes a network environment.

According to another aspect of the embodiments of the present application, there is also provided an electronic device for implementing the display method for page navigation, where the electronic device may be a terminal, a server, or a combination thereof.

Fig. 8 is a block diagram of an alternative electronic device according to an embodiment of the present application, as shown in fig. 8, including a processor 802, a communication interface 804, a memory 806, and a communication bus 808, where the processor 802, the communication interface 804, and the memory 806 are in communication with each other via the communication bus 808, where,

a memory 806 for storing a computer program;

the processor 802, when executing the computer program stored in the memory 806, performs the following steps:

s1, detecting a first trigger operation executed on a target page displayed on a target display window, wherein the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at the position of the navigation bar of the target page, and the first trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window;

s2, responding to the first trigger operation, and adjusting the page position displayed in the target display window to a first page position;

s3, displaying the target navigation bar at the first window position of the target display window if the first page position is greater than the navigation bar position.

Alternatively, in this embodiment, the communication bus may be a PCI (Peripheral Component Interconnect) bus, an EISA (Extended Industry Standard Architecture) bus, or the like. The communication bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one thick line is shown in FIG. 8, but this is not intended to represent only one bus or type of bus. The communication interface is used for communication between the electronic equipment and other equipment.

The memory may include RAM, and may also include non-volatile memory (non-volatile memory), such as at least one disk memory. Alternatively, the memory may be at least one memory device located remotely from the processor.

As an example, the memory 806 may include, but is not limited to, the first detection unit 702, the first adjustment unit 704, and the first display unit 706 in the display device including the page navigation described above. In addition, the display device may further include, but is not limited to, other module units in the above page navigation display device, which is not described in detail in this example.

The processor may be a general-purpose processor, and may include but is not limited to: a CPU (Central Processing Unit), an NP (Network Processor), and the like; but also a DSP (Digital Signal Processing), an ASIC (Application Specific Integrated Circuit), an FPGA (Field Programmable Gate Array) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component.

In addition, the electronic device further includes: and the display is used for displaying the target display window, and all or part of the page area of the target page can be displayed in the target display window.

Optionally, the specific examples in this embodiment may refer to the examples described in the above embodiments, and this embodiment is not described herein again.

It can be understood by those skilled in the art that the structure shown in fig. 8 is only an illustration, and the device implementing the display method of page navigation may be a terminal device, and the terminal device may be a terminal device such as a smart phone (e.g., an Android phone, an iOS phone, etc.), a tablet computer, a palm computer, a Mobile Internet Device (MID), a PAD, and the like. Fig. 8 is a diagram illustrating a structure of the electronic device. For example, the electronic device may also include more or fewer components (e.g., network interfaces, display devices, etc.) than shown in FIG. 8, or have a different configuration than shown in FIG. 8.

Those skilled in the art will appreciate that all or part of the steps in the methods of the above embodiments may be implemented by a program instructing hardware associated with the terminal device, where the program may be stored in a computer-readable storage medium, and the storage medium may include: flash disk, ROM, RAM, magnetic or optical disk, and the like.

According to still another aspect of an embodiment of the present application, there is also provided a storage medium. Optionally, in this embodiment, the storage medium may be configured to execute a program code of any one of the page navigation display methods in this embodiment of the present application.

Optionally, in this embodiment, the storage medium may be located on at least one of a plurality of network devices in a network shown in the above embodiment.

Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps:

Optionally, the specific example in this embodiment may refer to the example described in the above embodiment, which is not described again in this embodiment.

Optionally, in this embodiment, the storage medium may include, but is not limited to: various media capable of storing program codes, such as a U disk, a ROM, a RAM, a removable hard disk, a magnetic disk, or an optical disk.

The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

The integrated unit in the above embodiments, if implemented in the form of a software functional unit and sold or used as a separate product, may be stored in the above computer-readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or a part of or all or part of the technical solution contributing to the prior art may be embodied in the form of a software product stored in a storage medium, and including instructions for causing one or more computer devices (which may be personal computers, servers, network devices, or the like) to execute all or part of the steps of the method described in the embodiments of the present application.

In the above embodiments of the present application, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.

In the several embodiments provided in the present application, it should be understood that the disclosed client may be implemented in other manners. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one type of division of logical functions, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, units or modules, and may be in an electrical or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, and may also be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution provided in the embodiment.

In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or at least two units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.

The foregoing is only a preferred embodiment of the present application and it should be noted that those skilled in the art can make several improvements and modifications without departing from the principle of the present application, and these improvements and modifications should also be considered as the protection scope of the present application.

Claims

1. A display method of page navigation is characterized by comprising the following steps:

detecting a first trigger operation executed on a target page displayed on a target display window, wherein the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at a navigation bar position of the target page, and the first trigger operation is used for triggering and adjusting a page position of the target page displayed in the target display window;

responding to the first trigger operation, and adjusting the page position displayed in the target display window to be a first page position;

and under the condition that the first page position is larger than the position of the navigation bar, displaying the target navigation bar on a first window position of the target display window.

2. The method of claim 1, wherein adjusting the page position displayed within the target display window to the first page position comprises:

determining a component position of a first component matched with a first navigation item in the plurality of components under the condition that the first trigger operation is a selection operation of the first navigation item on the target navigation bar;

and positioning according to the component position of the first component, and adjusting the page position displayed on the target display window to the first page position, wherein the first page position is the position determined by the component position of the first component.

3. The method of claim 2, wherein positioning according to the component position of the first component, and wherein adjusting the page position displayed on the target display window to the first page position comprises:

determining a difference between a component position of the first component and a height of the target navigation bar as the first page position;

and controlling a scroll bar of the target page to scroll within a first time length according to the first page position so as to adjust the page position displayed on the target display window to the first page position.

4. The method of claim 1, wherein adjusting the page position displayed within the target display window to the first page position comprises:

determining a page scrolling parameter corresponding to the page scrolling operation under the condition that the first triggering operation is the page scrolling operation of the target page, wherein the page scrolling parameter is used for controlling the scrolling distance of a scroll bar of the target page;

and controlling the scroll bar to scroll for a second scroll distance according to the page scroll parameter so as to adjust the position of the page displayed in the target display window to be the first page position.

5. The method of claim 4, wherein after adjusting the page position displayed within the target display window to the first page position, the method further comprises:

acquiring a second component matched with the first page position from the plurality of components according to the first page position and the component position of each component in the plurality of components;

updating the display state of a second navigation item matched with the second component on the target navigation bar to be the selected state.

6. The method of claim 1, wherein after displaying the target navigation bar at the first window position of the target display window, the method further comprises:

detecting a position adjusting operation performed on the target navigation bar, wherein the position adjusting operation is used for adjusting the display position of the target navigation bar on the target display window to a second window position;

and responding to the position adjustment operation, and displaying the target navigation bar on the second window position of the target display window.

7. The method according to any one of claims 1 to 6, wherein after detecting the first trigger operation performed on the target page displayed on the target display window, the method further comprises:

detecting a second trigger operation executed on the target page, wherein the second trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window;

and under the condition that the time interval between the second trigger operation and the first trigger operation is smaller than a target time interval, responding to the second trigger operation after the target time interval is separated from the first trigger operation, and adjusting the page position displayed in the target display window to be a second page position.

8. A display device for page navigation, comprising:

the device comprises a first detection unit, a second detection unit and a display unit, wherein the first detection unit is used for detecting a first trigger operation executed on a target page displayed on a target display window, the target page comprises a plurality of components and a target navigation bar of the components, the target navigation bar is located at the position of the navigation bar of the target page, and the first trigger operation is used for triggering and adjusting the page position of the target page displayed in the target display window;

the first adjusting unit is used for adjusting the page position displayed in the target display window to a first page position in response to the first trigger operation;

and the first display unit is used for displaying the target navigation bar on a first window position of the target display window under the condition that the first page position is larger than the navigation bar position.

9. An electronic device comprising a processor, a communication interface, a memory and a communication bus, wherein said processor, said communication interface and said memory communicate with each other via said communication bus,

the memory for storing a computer program;

the processor for performing the method steps of any one of claims 1 to 7 by running the computer program stored on the memory.

10. A computer-readable storage medium, in which a computer program is stored, wherein the computer program is configured to carry out the method steps of any one of claims 1 to 7 when executed.