时间戳

首页 > 解决方案 > Scrollify (jquery) - 在站点的某些页面上禁用插件（新手）

javascript - Scrollify (jquery) - 在站点的某些页面上禁用插件（新手）

问题描述

我正在尝试在我的网站（Wordpress，woocomerce）www.chame-lemon.com上使用 scrollify，而且我在编程方面完全是绿色的，所以我真的需要你们的帮助。

我需要禁用商店页面和产品页面上的插件，当我想使用插件时，我对页面上的所有部分都使用了一个名为“hwdp”的类。但是由于页脚（它也有一个可以打开滚动的类），他在其他页面上被激活但是我不能在 Wordpress 中使用两个单独的页脚，所以我需要使用带有函数的代码

$.scrollify.disable();        
The disable method turns off the scroll snap behavior so that the page scroll like normal.

该插件有文档 https://projects.lukehaas.me/scrollify/#methods-continued

应该是这样的：如果页面上没有名为 hwdp 的类，则应禁用该插件，否则应启用该插件

我试图自己解决这个问题，我花了几个小时但没有得到任何结果......而且我知道这对于了解 jquery 的人来说是一件非常简单的事情。

<script>
jQuery(document).ready(function($) {
$.scrollify({ 
    section : ".hwdp",
    interstitialSection: ".footer",
    easing: "easeOutExpo",
    scrollSpeed: 1200,
    offset: 1,
    scrollbars: true,
    standardScrollElements: "",
    setHeights: true,
    overflowScroll: true,
    updateHash: true,
    touchScroll: false,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {},

 });

if (!$('section').hasClass('.hwdp')) {
$.scrollify.enable();
  }else{
$.scrollify.disable();
  } 

});
</script>

标签： javascriptjquerywordpress

解决方案

在您的代码中，无论是否找到.hwdp该类，都会在每个页面上初始化插件。最好只在需要时才进行初始化。

section以下是仅当页面上存在带有 class时才启用插件的方法.hwdp。

<script>

jQuery(document).ready(function($) {
  if($('section.hwdp').length) {

    $.scrollify({ 
      section : ".hwdp",
      interstitialSection: ".footer",
      easing: "easeOutExpo",
      scrollSpeed: 1200,
      offset: 1,
      scrollbars: true,
      standardScrollElements: "",
      setHeights: true,
      overflowScroll: true,
      updateHash: true,
      touchScroll: false,
      before:function() {},
      after:function() {},
      afterResize:function() {},
      afterRender:function() {},
    });

  } 
});

</script>

推荐阅读