2016-02-12 173 views
1

我一直在努力处理一段应该很容易实现的代码,我只是没有看到我做错了什么。我希望你们能帮忙。滚动导航无法正常工作

我想让我的左侧导航栏向下滚动,当用户即将滚动过去那个导航栏。我发现了一个很好的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> 

个功能.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'); 
+0

感谢您的回复,我试过了,但可惜似乎没有任何改变... – HagelslagBMB

回答

0

您有Javascript冲突。将jQuery放入不冲突模式。

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

是的是的!谢谢!我永远不会发现:) 它现在完美的作品,再次感谢! – HagelslagBMB

+0

不客气@HagelslagBMB。 – smdsgn