javascript - 滚动导航无法正常工作

Question

我一直在努力编写一段应该很容易实现的代码，但我只是不明白我做错了什么。希望大家能够帮忙。

当用户即将滚动经过该导航栏时，我试图让左侧导航栏向下滚动。我发现了一个很棒的 jsfiddle，我尝试实现它，但到目前为止它只部分工作。

这是 jsfiddle:http://jsfiddle.net/b43hj/

网站是:http://justaddwater.nl我希望当浏览器顶部碰到内容区域顶部的红线时，左侧的蓝色导航栏开始滚动。但现在它立即开始滚动。

我有一种感觉，js 代码没有被执行，但我可能是错的。谁能帮我解决这个问题，然后告诉我我是个白痴，因为我自己没有看到问题？ ^^'谢谢!

/css/hagel.css

#sidebar { 
position:fixed;
top:250px;
background-color:red
}

/js/hagel.js

$(window).scroll(function(){
 $("#sidebar").css("top",Math.max(0,250-$(this).scrollTop()));
});

sidebar.php

<div id="sidebar" class="widgets-area">
<?php dynamic_sidebar('sidebar-1'); ?>
</div>

functions.php

<?php
function hagel_script_enqueue() {
//css
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.4', 'all');
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/hagel.css', array(), '1.0.0', 'all');
//js
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.4', true);
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/hagel.js', array(), '1.0.0', true);
}

add_action( 'wp_enqueue_scripts', 'hagel_script_enqueue');

Answer 1

您遇到了 Javascript 冲突。将 jQuery 置于无冲突模式。

jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
  $(window).scroll(function(){
    $("#sidebar").css({top:Math.max(0,250-$(this).scrollTop())});
  });
});