草庐IT

javascript - 关节 WP4 (SASS) : Changing Properties in Sticky

coder 2023-07-03 原文

TL;DR:Sticky 实际上能够对我通过 JavaScript 提供的更改使用react吗？如果是，怎么做？

(该项目使用 Foundation 6.2 和 WordPress 4.4，主题安装使用 Node.js/npm 和 gulp 4.0。我的问题，详细信息，以粗体标记。)

我想制作 nav bar sticky 使用 Foundation 的 Sticky 插件，但只有当我点击一个按钮时。这意味着当 DOM 全部完成时，nav bar 不应该“单独存在”，而是留在文档中的顶部位置。 此外，它应该在向下滚动时消失，但在向上滚动时保持不变。

nav bar 已正确包装在所有必需的 div 中s，所以 nav酒吧能坚持。 “另外”部分出现了问题。我的想法是首先使用 PHP 实例化 Sticky:

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

之后，更改data-btm-anchor使用在点击时触发的 JavaScript 滚动到当前滚动位置。这没有我想要的那么好用。到目前为止我尝试了什么:

  1. 使用 getElementByID 时然后 setAttribute , data-btm-anchor PHP 文件中的内容确实会根据 Firebug 进行更改，但这不会影响 nav酒吧一点；它留在原处。 我是否需要“重新实例化”Sticky，如果需要，如何实现？
  2. docs提及:

Setting options with JavaScript involves passing an object into the constructor function, like this:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

这是否意味着我可以将新参数传递给一个已经存在的插件实例？每当我传递一个新的 Foundation.Sticky 时对象只不过是一个不同的 btmAchor 作为我的 jQuery('#sticky_header') 的选项数组参数，什么都没发生。

  1. docs还建议以编程方式将 Sticky 添加到我的“sticky_header”。如果可行，我可以尝试直接更改 jQuery 对象。到目前为止，我已经能够通过以下方式成功地将 Sticky 插件绑定(bind)到我的 header :

    1. 将按钮获得其功能的 .js 放入 assets/js/scripts (然后运行 ​​gulp )
    2. 从我的 <header class="header"> 中删除所有数据粘性标签, 因此当 DOM 完成加载时，没有向 header 注册粘性插件

    3. 以编程方式添加插件:

      function button_fire(){
  var options = {
    topAnchor:"1",
    btmAnchor:"footer:top",
    marginTop:"1"
  };
  var stick = new Foundation.Sticky(jQuery('.header'), options);
}

    标题现在根据 Firebug 获得“粘性”类。但它仍然不起作用 - 相反，它会出现故障:“标题空间”有些折叠，因此它略微覆盖了“内容”div以下。你知道什么，标题不粘。这是一个错误吗？

    假设它现在可以“出色地”工作，理论上我可以通过取消引用 var stick 来更改属性吗？或使用 jQuery('#sticky_header')或 jQuery('.header') ?

最重要的是，jQuery 无法正常工作。我在使用 $ 时遇到了很多问题 在我的脚本中，例如，我无法运行 destroy() Sticky 的方法因此(如果它起作用，我可能已经销毁了 Sticky 的一个实例以创建一个新的，并将 btmAnchor 设置为新的滚动位置)。我将为此打开另一个问题。

最佳答案

你可以在你的 scss 中使用 sticky css 属性。

在 html 或 php 中向您的组件添加类:

<div data-sticky-container class="sticky-container">

在 scss 或 css 中:

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

现在只需输入您需要的距顶部的距离!

关于javascript - 关节 WP4 (SASS) : Changing Properties in Sticky，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35682646/

关节javascriptcodeheaderstrongjquerywordpresszurb-foundationzurb-foundation-6

有关javascript - 关节 WP4 (SASS) : Changing Properties in Sticky的更多相关文章

  1. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. ruby - 为什么 `middleman serve` 有效，但是 `middleman build` 编译这个 Sass 失败？ - 2

    当我刚刚运行middleman时服务，all.css编译得很好，只包含对+box-shadow(none)的调用:/*line1,/home/yang/asdf/source/stylesheets/content.css.sass*/div{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}但是当我构建网站时，我得到了这个Sass/Compass错误:$middlemanbuildSlim::EmbeddedEngineisdeprecated,itiscalledSlim::EmbeddedinSlim2.0

  5. ruby - 无法激活 susy-2.1.1，因为 sass-3.2.17 与 sass 冲突 (~> 3.3.0) - 2

    我已经安装了最新版本的compass、sass和susy。但我仍然收到此错误:Unabletoactivatesusy-2.1.1,becausesass-3.2.17conflictswithsass(~>3.3.0)有人知道这个Ruby是如何工作的吗？这是我安装的gem的列表:***LOCALGEMS***CFPropertyList(2.2.0)chunky_png(1.3.0)compass(0.12.4)compass-core(1.0.0.alpha.19)compass-import-once(1.0.4)compass-rails(1.1.3)fssm(0.2.10)l

  6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  7. ruby - jekyll 观看 haml 和 sass - 2

    我已经有一个在不同文件夹中包含.haml和.scss文件的项目。我按照这里的指南http://winstonyw.com/2013/02/24/jekyll_haml_sass_and_github_pages/创建了_plugins/haml.rb和_plugins/sass.rb我将我所有的.scss文件移动到./assets/css/文件夹中为了确保，我还创建了layouts文件夹并将所有.haml文件放在其中。我运行了jekyllserve--watch并且这些.haml/.scss文件没有在_sites中转换为.html或.css文件。我也无法通过浏览器访问它们。我在这里试过

  8. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  9. ruby - 用于 CSS3 跨浏览器兼容性的 SASS 插件？ - 2

    是否有一个SASS扩展可以采用SASS样式表，找到中性属性(例如border-radius)并为其输出所有特定于供应商的属性(例如-webkit-border-radius等)自动？我真的不想手动创建所有混入，也不想手动编写代码。我确定一定有这样的扩展名，但我找不到它。帮忙？ 最佳答案 有一个非常好的gem可以满足您的需求。它叫做Bourbon它不会用特定于供应商的css替换您的css，因为它可以像SASS一样工作。它基本上是一个正确生成跨浏览器css的mixin集合。 关于ruby-用

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐