无法让scroll脚本上的突出显示菜单项与WordPress jQuery主题一起使用

Question

我正在建立一个具有Divi主题的一页WordPress网站，我希望菜单项突出显示，而页面是向上/向下滚动像这里：http://codepen.io/ivanchi/pen/QEEeKd?editors=0010。问题是我不能让它在Wordpress上工作。我使用以下代码对其进行了排队：

​

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets', 16 );
            
            wp_register_script( 'jqueryMinJs', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' , '', '', true );
            wp_enqueue_script( 'jqueryMinJs' );
            
            wp_register_script( 'highlight-on-scroll', get_template_directory_uri().'/js/highlight_on_scroll.js', array('jquery'), false, true );
	    wp_enqueue_script( 'highlight-on-scroll' );      
}
?>

​

我在/js/ jQUERY _on_scroll.js目录中包含了这个scroll.js脚本：

​

var $jq = jQuery.noConflict(true);
(function($) {

              $jq("div").css("border", "1px solid red");
		$jq("#et-top-navigation a").addClass("green-navigation");

// Cache selectors
var lastId,
 topMenu = $jq("#et-top-navigation"),
 topMenuHeight = topMenu.outerHeight()+1,
 // All list items
 menuItems = topMenu.find("a"),
 // Anchors corresponding to menu items
 scrollItems = menuItems.map(function(){
   var item = $jq($jq(this).attr("href"));
    if (item.length) { return item; }
 });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $jq(this).attr("href"),
      offsetTop = href === "#" ? 0 : $jq(href).offset().top-topMenuHeight+1;
  $jq('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 850);
  e.preventDefault();
});

// Bind to scroll
$jq(window).scroll(function(){
   // Get container scroll position
   var fromTop = $jq(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($jq(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("mactive")
         .end().filter("[href=#"+id+"]").parent().addClass("mactive");
   }                   
});
}($jq));

​

我用过

​

var $jq = jQuery.noConflict(true); 

​

为了防止冲突，这两行代码运行良好(我添加它们是为了测试目的)

​

            $jq("div").css("border", "1px solid red");
    		$jq("#et-top-navigation a").addClass("green-navigation");

​

但是jQuery脚本的其余部分不需要。

我做错了什么？

Answer 1

您使用的jquery代码不执行的原因，作为您应该使用的分隔符；

检查一下柱塞。

http://plnkr.co/edit/owvH2WPMJ10AQS3MkcHC

如果使用；，则会显示第二个警告，但如果使用，则代码将无法到达此处。

topMenu = $jq("#et-top-navigation");
topMenuHeight = topMenu.outerHeight()+1;