Question

我知道对类似的问题有各种各样的答案，但是我的JS技能很差，我无法在我的具体例子中得到答案。我在我的WordPress网站上有以下脚本，它告诉导航栏在向下滚动页面时一旦到达#startchange CSS ID就会改变颜色。

＆＃13;

jQuery(document).ready(function( $ ) {      
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('#main-header').css('background-color', 'rgba(28, 48, 64, 0.4)');
       } else {
          $('#main-header').css('background-color', 'transparent');
       }
   });
});

＆＃13;

这完全适用于我希望在其上实现的页面（着陆页），但对于博客帖子页面，背景为白色，因此导航栏是不可见的。我需要对此脚本进行哪些修改才能告诉它只能在着陆页上运行，或者可以对脚本做些什么来告诉它在博客帖子页面上应用某个CSS类时？

Answer 1

正如所建议的那样，你可以直接将脚本添加到那一页（这可能是一个很好的插件来做到这一点......例如，Elementor为你提供了一个插入javascript块等选项）

或者，只需将其包装在if语句中，该语句检查您需要的page-id - ##类：

jQuery(document).ready(function( $ ) {    
  // replace the XX with your page id
  if (document.body.classList.contains('page-id-XX')) { /
    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    $(document).scroll(function() { 
       scroll_start = $(this).scrollTop();
       if(scroll_start > offset.top) {
           $('#main-header').css('background-color', 'rgba(28, 48, 64, 0.4)');
        } else {
           $('#main-header').css('background-color', 'transparent');
        }
    });
  }
});

Answer 2

您可以创建一个if语句来检查页面的路径，如下所示：

if (top.location.pathname === '/x/x/path')
{

}

Answer 3

像这样的东西，但不熟悉Wordpress，最好只为你需要的页面实现JS。

jQuery(document).ready(function( $ ) {    
   var pageName = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
   if(pageName != null && pageName.toLowerCase() == "somepagename.php") {
       var scroll_start = 0;
       var startchange = $('#startchange');
       var offset = startchange.offset();
       $(document).scroll(function() { 
          scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $('#main-header').css('background-color', 'rgba(28, 48, 64, 0.4)');
           } else {
              $('#main-header').css('background-color', 'transparent');
           }
       });
   }
});

jQuery脚本只能在一个页面上运行

3 个答案: