CN111199005A - 网页组件处理方法及装置 - Google Patents

Abstract

本发明公开了一种网页组件处理方法及装置。其中，该方法包括：确定网页的吸顶容器的顶部与吸顶组件的顶部之间的距离，其中，吸顶组件为多个，多个吸顶组件设置在吸顶容器内；根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值；在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态。本发明解决了相关技术中的网页组件处理方式，需要对每个组件设定参数，导致过程繁杂的技术问题。

Description

网页组件处理方法及装置

技术领域

本发明涉及网页处理领域，具体而言，涉及一种网页组件处理方法及装置。

背景技术

随着Web前端技术的发展，人们不再满足于传统的静态网页内容展示方法，对其展示和交互方案提出了更高的要求。在现代网页布局设计中，常常会出现内容超出屏幕，用户需要通过滚动条进行滚动浏览的情况。在传统模式下，网页内容会随着滚动条位置的移动，移入或移出当前屏幕的可视区域，这样的交互方式符合通常的视觉原理，现代网页开发过程中，重点展示内容需要在滚动时不会随着页面滚动条滚动出可视区域，因此提出了Sticky模式(粘性定位模式)的交互设计方案，并推出了相应的框架。在组件移动到预设位置后，固定组件，但是，在组件为多个的情况下，需要为多个组件分别设置预设位置，导致过程过于繁杂的问题。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种网页组件处理方法及装置，以至少解决相关技术中的网页组件处理方式，需要对每个组件设定参数，导致过程繁杂的技术问题。

根据本发明实施例的一个方面，提供了一种网页组件处理方法，包括：确定网页的吸顶容器的顶部与所述吸顶组件的顶部之间的距离，其中，所述吸顶组件为多个，多个吸顶组件设置在吸顶容器内；根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值；在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态。

可选的，根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值，包括：在所述吸顶容器内没有已吸顶组件的情况下，将所述吸顶容器预设的吸顶阈值作为第一定位阈值。

可选的，根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值，包括：在所述吸顶容器内有进入已吸顶状态的吸顶组件的情况下，将所述吸顶容器预设的吸顶阈值，与进入已吸顶状态的所述吸顶组件的总高度之和作为第二定位阈值，其中，进入已吸顶状态的所述吸顶组件为一个或多个，进入已吸顶状态的所述吸顶组件的高度为顶部与底部之间的距离。

可选的，在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态之后，包括：监测所述距离；在所述距离大于所述定位阈值的情况下，将所述吸顶组件确定为未吸顶状态，并将所述吸顶组件在原图层显示。

可选的，还包括：记录所述吸顶容器内的所有吸顶组件的顺序和已吸顶状态，其中，所述所有吸顶组件包括进入已吸顶状态的吸顶组件，未进入已吸顶状态的吸顶组件。

可选的，在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态之后，还包括：监测所述吸顶组件的高度；在所述高度发生变化的情况下，更新进入所述吸顶组件的顺序之后的所有未进入已吸顶状态的所述吸顶组件的定位阈值。

可选的，在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态之后，包括：将所述吸顶组件，在所述吸顶容器中的显示区域进行剪切，并在所述显示区域内用于显示其他组件的图层之上的上图层，持续显示所述吸顶组件的显示内容，其中，所述图层为多个，位于上层的图层的显示内容覆盖位于下层的图层的显示内容。

根据本发明实施例的另一方面，还提供了一种网页组件处理装置，包括：第一确定模块，用于确定网页的吸顶容器的顶部与所述吸顶组件的顶部之间的距离，其中，所述吸顶组件为多个，多个吸顶组件设置在吸顶容器内；第二确定模块，用于根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值；第三确定模块，用于在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态。

根据本发明实施例的另一方面，还提供了一种存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述中任意一项所述网页组件处理方法。

根据本发明实施例的另一方面，还提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述中任意一项所述网页组件处理方法。

在本发明实施例中，采用确定网页的吸顶容器的顶部与吸顶组件的顶部之间的距离，其中，吸顶组件为多个，多个吸顶组件设置在吸顶容器内；根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值；在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态的方式，通过吸顶容器内的进入已吸顶状态的吸顶组件，对吸顶组件的定位阈值进行自动确定，达到了对多个吸顶组件的间接确定的目的，从而实现了简化吸顶组件的参数设置流程的技术效果，进而解决了相关技术中的网页组件处理方式，需要对每个组件设定参数，导致过程繁杂技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种网页组件处理方法的流程图；

图2是根据本发明实施方式的组件吸顶方法的时序图；

图3是根据本发明实施方式的组件吸顶方法的流程图；

图4是根据本发明实施方式的网页初始状态的示意图；

图5是根据本发明实施方式的网页组件1未吸顶的示意图；

图6是根据本发明实施方式的网页组件1已吸顶的示意图；

图7是根据本发明实施方式的网页吸顶容器的剪裁区域的示意图；

图8是根据本发明实施方式的网页组件3已吸顶的示意图；

图9是根据本发明实施方式的网页组件4已吸顶的示意图；

图10是根据本发明实施方式的组件1、3、4已吸顶后网页移动的示意图；

图11是根据本发明实施方式的网页组件1高度变化的示意图；

图12是根据本发明实施例的一种网页组件处理装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本发明实施例，提供了一种网页组件处理方法的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种网页组件处理方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，确定网页的吸顶容器的顶部与吸顶组件的顶部之间的距离，其中，吸顶组件为多个，多个吸顶组件设置在吸顶容器内；

步骤S104，根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值；

步骤S106，在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态。

通过上述装置，采用确定网页的吸顶容器的顶部与吸顶组件的顶部之间的距离，其中，吸顶组件为多个，多个吸顶组件设置在吸顶容器内；根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值；在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态的方式，通过吸顶容器内的进入已吸顶状态的吸顶组件，对吸顶组件的定位阈值进行自动确定，达到了对多个吸顶组件的间接确定的目的，从而实现了简化吸顶组件的参数设置流程的技术效果，进而解决了相关技术中的网页组件处理方式，需要对每个组件设定参数，导致过程繁杂技术问题。

上述网页可以包括多个显示组件，包括吸顶组件和非吸顶组件，吸顶组件在移动到显示区域的预定位置可以是实现吸顶，也即是将该组件固定在该位置持续进行显示，非吸顶组件随着移动会消失在显示区域之外，直至不显示在显示区域。上述吸顶容器可以是承载上述显示组件或者吸顶组件，实现对吸顶组件的吸顶。

在本实施例中，上述吸顶距离就是吸顶组件的顶部与吸顶容器的顶部之间的距离。上述吸顶容器可以是与网页的显示区域相同大小，也可以是网页上的一个显示区域，上述多个吸顶组件均在吸顶容器的区域内进行显示，吸顶容器可以是一个显示范围。

上述根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值，在本实施例中，可以通过对吸顶容器内的吸顶组件进行监控，对第一个吸顶组件设置一个吸顶阈值作为该吸顶组件的定位阈值，在吸顶组件达到定位阈值的情况进入已吸顶状态，成为进入已吸顶状态的吸顶组件，第二个吸顶组件以及之后的吸顶组件的定位阈值，都需要根据上述吸顶阈值和进入已吸顶状态的吸顶组件的高度来确定，从而能够实现不必对每个吸顶组件的定位阈值进行设定，简化吸顶组件的参数设置流程的技术效果，进而解决了相关技术中的网页组件处理方式，需要对每个组件设定参数，导致过程繁杂技术问题。

具体的，根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值，包括：在吸顶容器内没有进入已吸顶状态的吸顶组件的情况下，将吸顶容器预设的吸顶阈值作为第一定位阈值。

另一种情况，根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前吸顶组件进入已吸顶状态时的定位阈值，包括：在吸顶容器内有进入已吸顶状态的吸顶组件的情况下，将吸顶容器预设的吸顶阈值，与进入已吸顶状态的吸顶组件的总高度之和作为第二定位阈值，其中，进入已吸顶状态的吸顶组件为一个或多个，进入已吸顶状态的吸顶组件的高度为顶部与底部之间的距离。

从而根据吸顶容器内的进入已吸顶状态的吸顶组件对吸顶组件的定位阈值进行自动确定，简化吸顶组件的参数设置流程。

可选的，在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态之后，包括：监测距离；在距离大于定位阈值的情况下，将吸顶组件确定为未吸顶状态，并将吸顶组件在原图层显示。

进入已吸顶状态的吸顶组件还可以根据网页反向移动脱离已吸顶状态，进入未吸顶状态，在未吸顶状态下，跟随网页的其他内容移动，例如跟随非吸顶组件进行移动。

可选的，还包括：记录吸顶容器内的所有吸顶组件的顺序和已吸顶状态，其中，所有吸顶组件包括进入已吸顶状态的吸顶组件，未进入已吸顶状态的吸顶组件。

可以对吸顶容器内的所有的吸顶组件进行排序和记录，在网页移动时，可以按顺序对吸顶组件实现进入已吸顶状态，在脱离已吸顶状态的情况可以按照上述顺序的倒序进行脱离。从而有序的对吸顶组件的定位阈值进行确定，有效简化吸顶组件的参数设置流程。

可选的，在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态之后，还包括：监测吸顶组件的高度；在高度发生变化的情况下，更新吸顶组件的顺序之后的所有吸顶组件的定位阈值。

指定吸顶组件的高度发生改变时，需要更新所吸顶组件顺序之后的所有吸顶组件的定位阈值，无论处于已吸顶状态还是未吸顶状态。在进入已吸顶状态的吸顶组件的高度发生变化的情况下，更新该吸顶组件顺序之后的所有吸顶组件的定位阈值，包括进入已吸顶状态的吸顶组件和未进入已吸顶状态的吸顶组件，但是不改变吸顶组件的状态，进入已吸顶状态的吸顶组件的定位阈值改变，只是其现实为之改变，不改变其所处的已吸顶状态。

可选的，在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态之后，包括：将吸顶组件，在吸顶容器中的显示区域进行剪切，并在显示区域内用于显示其他组件的图层之上的上图层，持续显示吸顶组件的显示内容，其中，图层为多个，位于上层的图层的显示内容覆盖位于下层的图层的显示内容。

进入已吸顶状态的吸顶组件的显示区域被剪切，从而固定上述进入已吸顶状态的吸顶组件的显示区域，网页在下层的图层移动时，移动到进入已吸顶状态的吸顶组件的部分内容被覆盖，保证在进入已吸顶状态的吸顶组件的显示区域只显示该进入已吸顶状态的吸顶组件的内容。

需要说明的是，本实施例还提供了一种可选的实施方式，下面对该实施方式进行详细说明。

随着Web前端技术的发展，人们不再满足于传统的静态网页内容展示方法，对其展示和交互方案提出了更高的要求。在现代网页布局设计中，常常会出现内容超出屏幕，用户需要通过滚动条进行滚动浏览的情况。在传统模式下，网页内容会随着滚动条位置的移动，移入或移出当前屏幕的可视区域，这样的交互方式符合通常的视觉原理，但同样也带来了一些不够便利的问题：

1)当前可视区域内存在重点展示内容，且其与下方的较长内容产生强关联性时，若重点内容滚动出可视区域，则可能会导致用户在阅读关联内容时，遗忘前面的重点内容，如表格组件的表头信息

2)当用户需要执行网页的可交互操作时，相关交互组件可能被滚动到可视区域以外，用户需要重新使相关交互组件回到可视区域范围内，才能够进行下一步操作，如网页顶部的模块菜单组件

基于以上问题，现代网页开发过程中，重点展示内容需要在滚动时不会随着页面滚动条滚动出可视区域，因此提出了Sticky模式(粘性定位模式)的交互设计方案，并推出了相应的框架，包含以下内容：

1)组件默认位于网页中，其CSS样式中的位置属性为相对定位模式，即position:relative

2)组件存在一个阈值属性，在本文中我们称之为定位阈值(position-threshold)，该属性用于描述何时需要修改组件的定位模式，即何时组件应该处于吸顶状态

3)组件相对于可视区域顶部的距离，在本文中我们称之为顶部距离(top-distance)，该属性值会随着滚动条位置的改变而不断发生变化

4)组件可以设置position-threshold，并和组件的top-distance进行对比，根据对比的结果切换其定位模式

5)当组件随滚动条向下移动，且top-distance小于或等于position-threshold时，修改元素的CSS位置属性为固定定位模式，即position:fixed。此时组件处于吸顶状态，组件固定在页面顶部，并且不会随着滚动条的移动继续移动

6)当组件随滚动条向上移动，其top-distance大于position-threshold时，修改元素的CSS位置属性为相对定位模式，即position:relative。组件处于未吸顶状态，组件位置不再固定，且会随着滚动条的移动而移动

同时，前端技术标准与指南MDN(Mozilla Developer Network)提供了CSS属性的粘性定位模式，即position:sticky，被认为是相对定位和固定定位的混合，组件在超过域特定阈值前为相对定位，之后为固定定位。然而，该CSS样式属性当前仍处于实验阶段，各大主流浏览器对其的兼容性并不友好，在实际开发过程中为了保证对多种浏览器的支持型，常常不能使用这种实验阶段的属性。

组件库中提出了吸顶功能分解为吸顶容器和吸顶组件的方案，并针对吸顶组件提供了一系列的控制属性，包括吸顶的定位阈值属性与吸顶状态属性。利用该组件库，能够快速而方便的对网页单个元素执行吸顶过程。

现有技术中的组件库中针对吸顶功能采用的是固定属性值模式，即在页面加载时吸顶组件的属性值已经确定，无法进行动态修改，不利于现代响应式网页的设计开发过程；而且当页面存在多个吸顶元素时，需要分别对每个吸顶元素进行属性设置，这在开发过程中非常繁琐，并且在吸顶组件进行动态改变高度时，页面结构容易错乱，不利于页面显示。

本实施方式实现了一种网页滚动过程中元素自适应吸顶展示的方法，该方法主要包括：网页中同时定义吸顶容器和吸顶组件两种类型的元素；吸顶容器内的滚动条移动时，将会触发内部吸顶组件的吸顶功能及吸顶状态改变；吸顶容器包含吸顶阈值属性和吸顶组件数组属性；吸顶容器中存在有处于已吸顶状态的组件时，容器顶部到达第一个已吸顶状态组件之间的内容将不可见；吸顶组件包含未吸顶和已吸顶两种状态，分别用于描述当前组件的CSS定位属性值为postion:relative或position:fixed；吸顶组件包含定位阈值属性，该属性由吸顶容器的吸顶阈值属性和吸顶组件数组属性自动计算得到；页面可以同时包括多个吸顶组件，不需要对每个组件进行参数设置，其吸顶阈值可以根据已有吸顶组件的高度动态计算得出。

本实施方式构建了一种网页设计模式，开发者在设计吸顶功能时，不用再繁杂的为所有吸顶组件预定义定位阈值属性，只需要给吸顶容器设置吸顶阈值属性，容器内的吸顶组件将会根据吸顶阈值和处于已吸顶状态组件的高度自动计算得到当前组件的定位阈值；当吸顶容器内存在处于已吸顶状态的组件时，容器顶部与第一个已吸顶状态组件顶部之间的区域的内容将被裁剪，用于遮挡滚动过程中出现的内容。

吸顶展示方法的主要配置：

1)吸顶容器与吸顶组件，其中吸顶组件位于吸顶容器中，一个吸顶容器下可以包含多个需要吸顶的组件

2)吸顶容器的吸顶阈值属性(sticky-threshold)，该属性用于定义内部吸顶组件的初始定位阈值

3)吸顶容器的吸顶组件数组属性(sticky-items)，该属性用于记录容器内部所有的吸顶组件、吸顶顺序以及吸顶状态

4)吸顶组件的定位阈值属性(position-threshold)，该属性用于描述在何处需要修改组件的定位模式

5)吸顶组件的顶部距离属性(top-distance)，该属性用于描述吸顶组件相对于吸顶容器可视区域顶部的距离

图2是根据本发明实施方式的组件吸顶方法的时序图，图2所示，吸顶展示方法的主体分布：

该吸顶展示方法主要分为吸顶容器与吸顶组件，吸顶容器内的滚动条移动，将会触发吸顶组件的吸顶功能。吸顶组件会在吸顶容器的滚动事件、或吸顶组件自身的大小改变事件监听过程中，动态计算当前组件的定位阈值属性值与顶部距离属性值，并比较两者的大小。当顶部距离属性大于或等于定位阈值属性时，表示组件需要执行吸顶过程，并修改其状态为已吸顶状态；当顶部距离属性小于定位阈值属性时，表示组件需要离开吸顶状态，并修改其状态为非吸顶状态。

图3是根据本发明实施方式的组件吸顶方法的流程图，如图3所示，吸顶展示方法的工作流程：

1)网页初次渲染时，按照正常模式渲染HTML文件中的所有元素，即所有元素按照文件中定义的布局展示在页面中。

2)采用特定的标识符(如添加特定属性、或添加特定的样式类别)定义出网页中对应的吸顶容器和吸顶组件，一个吸顶容器下可以包含多个吸顶组件。

3)设置吸顶容器的吸顶阈值属性，如未设置，则默认吸顶阈值属性为0。

4)设置吸顶容器的吸顶组件数组属性，内容为吸顶容器下的所有吸顶组件。

5)向下拖动吸顶容器内的滚动条。

6)遍历吸顶容器的吸顶组件数组属性，设置每一个吸顶组件的定位阈值属性为吸顶容器的吸顶阈值属性值及其上方所有处于已吸顶状态组件的高度之和。由于当前所有吸顶组件均处于未吸顶状态，所有吸顶组件的定位阈值属性均为吸顶阈值属性。

7)滚动条继续向下移动，使第一个吸顶组件到达容器设置的吸顶阈值处，即组件的顶部距离属性等于其吸顶阈值属性属性值。

8)修改吸顶容器的CSS样式(层叠样式Cascading Style Sheet)，修改其剪切区域属性clip-path为矩形模式，高度为吸顶阈值属性，此时容器上方高度为吸顶阈值属性的矩形区域被裁剪，其中内容不可见。

9)修改第一个吸顶组件的CSS样式，修改其定位方式为固定位置模式，即position:fixed，并修改其顶部距离属性值为其定位阈值属性值。

10)修改第一个吸顶组件的吸顶状态为已吸顶，并指定吸顶顺序为1，并将其添加到吸顶容器的吸顶组件数组属性中。

11)遍历吸顶容器的吸顶组件数组属性，设置每一个吸顶组件的定位阈值属性为吸顶阈值属性与其上方所有处于已吸顶状态组件的高度之和。

12)滚动条继续向下移动，使第二个吸顶组件到达第一个吸顶组件的底部，即组件的顶部距离属性与其定位阈值属性相等。

13)修改第二个吸顶组件的CSS样式，修改其定位方式为固定位置模式，即position:fixed，并修改其顶部距离属性值为其定位阈值属性值。

14)修改第二个吸顶组件的吸顶状态为已吸顶，并指定吸顶顺序为2。

15)滚动条继续向下移动时，继续执行步骤11至步骤14，直到所有的吸顶组件均处于已吸顶状态。

16)向上拖动吸顶容器内的滚动条。

17)遍历吸顶容器的吸顶组件数组属性，设置吸顶组件的定位阈值属性为吸顶阈值属性与其上方所有进入已吸顶状态的吸顶组件的高度之和。

18)滚动条继续向上移动，使最后一个吸顶组件到达其定位阈值属性处，即组件的顶部距离属性与其定位阈值属性相等。

19)修改最底部的进入已吸顶状态的吸顶组件的CSS样式，修改其定位方式为相对位置模式，即position:relative。

20)修改最后一个吸顶组件的吸顶状态为未吸顶，并删除吸顶顺序属性。

21)滚动条继续向上移动时，继续执行步骤17至步骤20，直到所有的吸顶组件均处于未吸顶状态。

22)修改吸顶容器的CSS样式，修改其剪切区域属性clip-path为默认值，即clip-path:unset，此时容器上方被裁剪的矩形区域移除，其中内容恢复可见。

吸顶展示方法的使用示例：

1)图4是根据本发明实施方式的网页初始状态的示意图，如图4所示，HTML文件正常渲染，在吸顶容器下存在5个组件，其中3个为吸顶组件，2个为非吸顶组件，吸顶容器的吸顶阈值属性设置为20px，第一个组件的顶部距离属性为50px，此时吸顶容器的吸顶组件数组属性包含组件1、组件3和组件4,如图3所示。可以计算得到，组件1、组件3和组件4的定位阈值属性均为20px，与吸顶容器的吸顶阈值属性相等。

2)图5是根据本发明实施方式的网页组件1未吸顶的示意图，如图5所示，当吸顶容器内的滚动条向下移动时，组件1的顶部距离属性不断改变，当组件1的顶部距离属性等于20px，即组件1的顶部距离属性与其定位阈值属性相等时，组件1执行吸顶功能，变更定位模式为固定模式，修改CSS定位属性为position:fixed，并设置top属性为top:20px。组件1变更为已吸顶状态，组件3和组件4的定位阈值属性变更为吸顶阈值属性与组件1的高度之和，即70px。

3)图6是根据本发明实施方式的网页组件1已吸顶的示意图，图7是根据本发明实施方式的网页吸顶容器的剪裁区域的示意图，如图6和图7所示，当吸顶容器内存在有已吸顶状态的组件时，需要同步设置吸顶容器的裁剪区域属性，如果未设置该属性，当滚动条继续向下移动时，吸顶容器顶部以下吸顶阈值属性高度内将会出现透视的内容，如图5所示。设置吸顶容器的裁剪区域属性clip-path为高度为吸顶阈值属性的矩形模式后，下方内容不可见，

4)图8是根据本发明实施方式的网页组件3已吸顶的示意图，如图8所示，当吸顶容器内的滚动条继续向下移动时，组件3的顶部距离属性不断改变，当组件3的顶部距离属性等于70px，即组件3的顶部距离属性与其定位阈值属性相等时，组件3执行吸顶功能，变更定位模式为固定模式，修改CSS定位属性为position:fixed，并设置顶部距离属性为top:70px。组件3变更为已吸顶状态，组件4的定位阈值属性变更为吸顶阈值属性与组件1、组件3的高度之和，即120px。

5)图9是根据本发明实施方式的网页组件4已吸顶的示意图，如图9所示，当吸顶容器内的滚动条继续向下移动时，组件4的顶部距离属性不断改变，当组件4的顶部距离属性等于120px，即组件4的顶部距离属性与其定位阈值属性相等时，组件4执行吸顶功能，变更定位模式为固定模式，修改CSS定位属性为position:fixed，并设置顶部距离属性为top:120px。组件4变更为已吸顶状态，至此所有的吸顶组件均处于已吸顶状态。

6)图10是根据本发明实施方式的组件1、3、4已吸顶后网页移动的示意图，如图10所示，当吸顶容器内的滚动条继续向下移动时，组件5被移动至上面的所有吸顶组件下方，不再可见。

7)图11是根据本发明实施方式的网页组件1高度变化的示意图，如图11所示，当组件1的高度因为某些原因发生改变时，即其高度由50px变更为80px。组件3的定位阈值属性和顶部距离属性需要同步发生改变，变更为吸顶阈值属性与组件1的高度之和，即100px。组件4的定位阈值属性和顶部距离属性需要同步发生改变，变更为吸顶阈值属性与组件1、组件3的高度之和，即150px。

在网页的设计过程中，如页面中存在固定数量的吸顶组件时，或吸顶组件为动态添加、其数量不确定时，我们可以利用本文描述的吸顶展示方法，定义这些吸顶组件所在的容器为一个吸顶容器，并通过本文所描述的详细工作流程，对这些吸顶容器和吸顶组件进行统一管理。

如页面中需要存在表格元素，表格元素上方包含针对表格数据的过滤条件信息和分页信息，表格元素内包含表头信息和数据信息，当页面滚动条移动时，我们需要将过滤条件、分页信息和表头信息实时展示在页面顶部，这样对用户的可视化更加友好。

本实施方式能够使得前端开发工程师在设计和开发页面时，可以同时包含多个吸顶组件，有利于复杂页面的构建；同时可以对多个吸顶组件的进行统一化管理，每个吸顶组件的相关参数和位置会根据进入已吸顶状态的吸顶组件的高度动态变化，降低开发过程的复杂度，并且提高了页面动态渲染的性能。

吸顶功能需要包含吸顶容器与吸顶组件两种类型的元素，吸顶容器中包含吸顶阈值属性，该属性用于描述容器内吸顶元素的初始吸顶位置。

多组件吸顶功能的统一管理，每个吸顶组件的定位阈值为动态设置，由吸顶容器内所有处于已吸顶状态的吸顶组件动态计算得到。

吸顶组件的高度自适应变化，处于吸顶状态的吸顶组件的阈值会根据进入已吸顶状态的吸顶组件的高度变化动态变化。

吸顶容器内存在处于已吸顶状态的吸顶组件时，容器顶部添加高度为吸顶阈值的剪切区域，用于遮挡下方滚动过程中可能出现的文本内容。

图12是根据本发明实施例的一种网页组件处理装置的示意图，如图12所示，根据本发明实施例的另一方面，还提供了一种网页组件处理装置，包括：第一确定模块1202，第二确定模块1204和第三确定模块1206，下面对该装置进行详细说明。

第一确定模块1202，用于确定网页的吸顶容器的顶部与吸顶组件的顶部之间的距离，其中，吸顶组件为多个，多个吸顶组件设置在吸顶容器内；第二确定模块1204，与上述第一确定模块1202相连，用于根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前所述吸顶组件进入所述已吸顶状态时的定位阈值；第三确定模块1206，与上述第二确定模块1204相连，用于在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态。

通过上述装置，采用第一确定模块1202确定网页的吸顶容器的顶部与吸顶组件的顶部之间的距离，其中，吸顶组件为多个，多个吸顶组件设置在吸顶容器内；第二确定模块1204根据吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前所述吸顶组件进入所述已吸顶状态时的定位阈值；第三确定模块1206在距离小于或等于定位阈值的情况下，确定吸顶组件进入已吸顶状态的方式，通过吸顶容器内的进入已吸顶状态的已吸顶组件，对吸顶组件的定位阈值进行自动确定，达到了对多个吸顶组件的间接确定的目的，从而实现了简化吸顶组件的参数设置流程的技术效果，进而解决了相关技术中的网页组件处理方式，需要对每个组件设定参数，导致过程繁杂技术问题。

根据本发明实施例的另一方面，还提供了一种存储介质，存储介质包括存储的程序，其中，在程序运行时控制存储介质所在设备执行上述中任意一项网页组件处理方法。

根据本发明实施例的另一方面，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述中任意一项网页组件处理方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种网页组件处理方法，其特征在于，包括：

确定网页的吸顶容器的顶部与所述吸顶组件的顶部之间的距离，其中，所述吸顶组件为多个，多个吸顶组件设置在吸顶容器内；

根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前所述吸顶组件进入所述已吸顶状态时的定位阈值；

在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态。

2.根据权利要求1所述的方法，其特征在于，根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前所述吸顶组件进入所述已吸顶状态时的定位阈值，包括：

在所述吸顶容器内没有进入已吸顶状态的吸顶组件的情况下，将所述吸顶容器预设的吸顶阈值作为第一定位阈值。

3.根据权利要求1所述的方法，其特征在于，根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前所述吸顶组件进入所述已吸顶状态时的定位阈值，包括：

在所述吸顶容器内有进入已吸顶状态的吸顶组件的情况下，将所述吸顶容器预设的吸顶阈值，与进入已吸顶状态的所述吸顶组件的总高度之和作为第二定位阈值，其中，进入已吸顶状态的所述吸顶组件为一个或多个，进入已吸顶状态的所述吸顶组件的高度为顶部与底部之间的距离。

4.根据权利要求1所述的方法，其特征在于，在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态之后，包括：

监测所述距离；

在所述距离大于所述定位阈值的情况下，将所述吸顶组件确定为未吸顶状态，并将所述吸顶组件在原图层显示。

5.根据权利要求1所述的方法，其特征在于，还包括：

记录所述吸顶容器内的所有吸顶组件的顺序和已吸顶状态，其中，所述所有吸顶组件包括进入已吸顶状态的吸顶组件，未进入已吸顶状态的吸顶组件。

6.根据权利要求5所述的方法，其特征在于，在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态之后，还包括：

监测所述吸顶组件的高度；

在所述高度发生变化的情况下，更新所述吸顶组件的顺序之后的所有吸顶组件的定位阈值。

7.根据权利要求1所述的方法，其特征在于，在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态之后，包括：

将所述吸顶组件，在所述吸顶容器中的显示区域进行剪切，并在所述显示区域内用于显示其他组件的图层之上的上图层，持续显示所述吸顶组件的显示内容，其中，所述图层为多个，位于上层的图层的显示内容覆盖位于下层的图层的显示内容。

8.一种网页组件处理装置，其特征在于，包括：

第一确定模块，用于确定网页的吸顶容器的顶部与所述吸顶组件的顶部之间的距离，其中，所述吸顶组件为多个，多个吸顶组件设置在吸顶容器内；

第二确定模块，用于根据所述吸顶容器内进入已吸顶状态的吸顶组件，确定用于计算当前所述吸顶组件进入所述已吸顶状态时的定位阈值；

第三确定模块，用于在所述距离小于或等于所述定位阈值的情况下，确定所述吸顶组件进入已吸顶状态。

9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行权利要求1至7中任意一项所述网页组件处理方法。

10.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至7中任意一项所述网页组件处理方法。

Images