Sticky Menu (or Anything!) on Scroll – WordPress plugin WordPress插件下载

点击下载

滚动屏幕上的粘滞菜单(或任何内容!)

插件描述

概要

粘性菜单(或任何内容) )在WordPress的Scroll插件中,当您向下滚动时,只要它点击页面顶部,就可以使页面上的任何元素“粘滞”。虽然这通常用于将菜单保留在页面顶部,但插件允许您将任何元素设置为粘性(例如“操作号召唤”框,徽标等)

一点点基本需要HTML / CSS知识。您只需要知道如何为要粘贴的元素选择正确的选择器,并且您需要确保它是一个独特的选择器。有时一个简单的选择器,如“nav”,“#main-menu”,“。menu-main-menu-1”就足够了。其他时候你必须更详细,并使用更具体的选择器,如“标题> ul:first-child“或”nav.top .menu-header ul.main“。

产品特点

任何元素都可以粘贴:虽然常用于导航菜单,但该插件会让您选择任何带有名称,类或ID的独特元素。滚动浏览后,页面顶部。将其用于侧边栏,号召性用语框,横幅广告等。从顶部定位:可选地,您可以在粘性元素和页面顶部之间添加任意数量的空间,以便元素并不总是卡在页面的“天花板”上。 仅对某些屏幕尺寸启用:您可以选择设置粘性应该起作用的最小和/或最大屏幕尺寸。如果您有一个响应式网站,并且您不希望您的元素在较小的屏幕上粘滞,这可能很方便。 俯卧撑元件:可选择地,您可以选择页面下方的任何其他元素来推送h再次粘贴元素(例如侧边栏小部件)。 管理栏感知:检查当前用户是否在页面顶部有管理工具栏。如果有,粘性元素不会遮挡它(或被它遮挡)。 Z-index :如果页面上有其他元素隐藏或窥视您的粘性元素,您可以轻松添加Z索引。 传统模式:在2.0中,引入了一种新的粘性方法。在旧版模式下,将使用旧方法。请参阅FAQ以获取详细信动态模式:通过添加动态模式(仅限传统模式)解决了响应主题中经常出现的一些问题。请参阅FAQ以获取详细信调试模式:通过打开调试模式找出元素不粘的可能原因,错误消息将出现在浏览器的控制台中。

屏幕截图

基本设置屏幕
高级设置屏幕

安装

将“sticky-menu-or-anything”目录上传到“wp-content / plugins”目录。在WordPress管理员中,转到PLUGINS并激活“粘滞菜单”(或什么!)“转到设置 – 粘贴菜单(或任何东西!)选择你想要粘贴的元素!

FAQ

安装说明将“sticky-menu-or-anything”目录上传到“wp-content / plugins”目录。在WordPress管理员中,转到PLUGINS并激活“Sticky Menu(或Anything!)”转到SETTINGS – STICKY MENU(或任何东西!)选择你想要制作stickyParty的元素!我在设置屏幕中选择了一个类/ ID,但是当我向下滚动时元素不会粘住。为什么不?

首先,确保如果按类名选择元素,它前面有一个点(例如“.main-menu”),如果你通过它的ID选择它,它前面有一个井号/井号/数字符号(例如“#main-menu”)。此外,请确保页面上只有一个元素与您正在使用的选择器。如果没有,或者多个元素与您的选择器匹配,则不会发生任何事情。

一旦元素变粘,它就不会正确定位/调整大小。

由于CSS的性质,有些情况下元素不能正确粘贴,通常如果它具有用于操纵其位置和/或尺寸的特定属性。如果您的粘性元素具有以下任何属性,则可能会导致冲突:

负边距绝对定位/左/底/右属性“display:inline”“!important”应用于其任何属性

尽量避免所有这些尽可能,但如果你不能,在传统模式下使用插件(见下文)有时会有所帮助。
另一种可能导致麻烦的情况是,粘性元素的任何父元素都应用了“transform”CSS属性。

一旦元素变粘,它就没有响应,并且在我更改浏览器大小时不会调整大小。

这是插件中的一个已知(且令人烦恼)的错误,我还没能正确解决。对于某些网站(当元素通常不包含任何Javascript交互性时),有时在传统模式下使用该插件会有所帮助(见下文)。

是否可以在元素中添加一些样式,但只有在粘性时?

要在粘性元素不粘时添加样式,请使用classname“.element-is-not-sticky”。
要仅在粘性元素粘滞时添加样式,请使用classname“.element-is-sticky”

以下代码将为您的元素添加红色背景只有当它不粘时才会圆,而只有当它是蓝色时才会变圆:

。元素不粘… {123>背景:红色;
}

.element-is-sticky {

背景:蓝色;
}
一旦元素变得粘稠,就会有一个短暂的时刻,你会看到它两次。

如果您在传统模式下使用该插件(见下文),则当粘性元素(或其任何内容)应用了CSS转换时会发生这种情况。因为原始元素变得不可见(并且它的克隆副本变得可见),所以可见 – 不可见的状态变化将发生转换(即,不是立即)。删除元素具有的任何转换,或尝试禁用传统模式。

我的菜单很棒,但当它处于粘性状态时,它不会在响应式主题上打开。

这是2.0版之前的版本中的一个错误,与主题不兼容。它已在2.0中修复,但在传统模式下,此错误仍然存​​在。如果由于某种原因需要启用传统模式,最好关闭移动菜单的粘性(设置“当屏幕小于:时不要粘贴元素”到651像素)。

我有另一个名为Easy Smooth Scroll Links的插件,但是一旦我的菜单变得粘稠,那个就不再起作用了。

这是2.0之前的版本中的一个错误,与插件不兼容。它已在2.0中修复,但在传统模式下,此错误仍然存​​在。如果由于某种原因需要启用传统模式,则无法修复此错误,但是有另一种解决方法。根据有这个问题的用户的报告,一个名为Page Scroll To ID的插件是Easy Smooth Scroll Links的一个有价值的替代品,并且可以在传统模式下使用Sticky Anything插件。

仍然无效。可能有什么不对?

检查插件设置中的“调试模式”复选框。重新加载页面和您可能会在浏览器的控制台窗口中看到错误。如果您使用了不存在的选择器,或者页面上有更多选择器,您将在控制台中收到通知。

是否可以有多个粘性元素?

当前版本仅允许一个粘性元素,但此功能将在下一个主要版本中实现。但是没有预期的发布日期。

什么是传统模式?我应该用吗?

在插件的2.0版本中,引入了一种新的/更好的使元素变粘的方法。在此之前,粘性元素基本上是原始元素的克隆副本。现在,元素本身变得粘稠,不再使用复制和克隆,这解决了很多问题。

那么,你是否应该使用它?好吧,如果您从早期版本升级此插件,默认情况下将启用传统模式,因为旧方法可能对您的网站完全正常。如果是这种情况,则根本不需要使用新方法,您可以继续使用旧的经典方法。如果它没有坏掉,请不要修理它,对吧?

话虽如此,值得检查你的元素是否与传统模式关闭一样好,因为这是“更好”的方法。试试看吧。如果它不起作用,您可以随时返回并再次启用它。

注意:默认情况下,新安装的插件将关闭传统模式。只有1.4(或之前)的UPGRADES默认情况下才会启用它。

这种动态模式到底是什么?

此模式仅在传统模式下可用,为了正确解释这一点,我们需要更深入地了解插件的功能。所以忍受我…

在传统模式中,当一个元素在页面顶部变粘时(并保持其位置而不管滚动),它实际上不是你看到的元素本身,而是它的克隆副本,而执行原始元素是不可见的和不可见的。

原始元素始终保留在页面上最初的位置,而克隆元素始终位于浏览器视口屏幕的顶部。但是,你永远不会同时看到它们;根据您的滚动位置,它总是只显示一个或另一个。

在原始插件版本中,将在您加载页面时立即创建克隆(但不会立即显示)。然后,当您向下滚动时,它将变为可见(并粘在顶部),而原始元素将从视图中消失。

但是,有些主题使用JavaScript动态创建移动网站的元素(主要是菜单)。使用此方法,加载页面时HTML源代码中不存在菜单,但是在页面完全加载后的某个时间创建菜单 – 在许多情况下,这些菜单只会在屏幕更多时生成(或者比某个特定宽度更小。使用插件的原始版本,问题是原始元素(您想要粘贴)可能在页面加载时未完全创建,因此克隆也不能完全正常运行。

进入动态模式。现在,在页面加载时不会创建元素的克隆 – 相反,它仅在用户滚动并点击“粘滞”点时创建。这可以确保克隆元素是原始元素在该特定时间点所包含的实际的1对1副本(而不是“页面加载”点,如果元素自此更改后可能会有所不同)。

为什么我们不一直使用动态模式?这与其他插件在页面加载时初始化并可能需要完整标记(包括clo)有关在那一点上。在动态模式下,页面加载时没有可用的克隆,因此如果其他插件正在查找尚不存在的元素,则可能会导致问题。

(这可能听起来非常令人困惑。事实就是如此!因此,做了很多工作来修复这个废话:从插件的v2.0开始,一个完全不同的方法被用来使元素变得粘稠,并且动态模式甚至不再是问题。)

P!

我需要更多的帮助!

请访问WordPress.org

上插件的支持论坛并发布消息(如果可能,请附上指向您网站的链接)。反应时间通常在几个小时内。 我需要一些插件目前不支持的功能。你能帮忙制作一个自定义版本吗?

如果定制很小,我可能马上帮忙。但是,如果请求的定制更加复杂,我将无法快速/免费进行,可能需要数小时。如果您对此感兴趣,请访问WordPress.org

上的插件的支持论坛,并告诉我您需要一些自定义工作(如果可能,请包含指向您网站的链接)。

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注