Question

我试图在我正在构建的Wordpress网站上使用Waypoints（http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/）实现粘性导航栏。想法是导航栏应位于大滑块/标题img下方，然后在到达页面顶部时粘到顶部。

 <?php wp_enqueue_script('jquery'); ?>



 <?php wp_head(); ?>

<style>
#menu.stuck {position:fixed;top:0;width:100%;}
</style>


<script src="http://www.chuckagency.com/wordpress-new/wp-content/themes/bootstrap-        ultimate/lib/bootstrap/js/waypoints.min.js"></script>
<script src="http://www.chuckagency.com/wordpress-new/wp-content/themes/bootstrap-ultimate/lib/bootstrap/js/waypoints-sticky.min.js"></script>




<script>
jQuery(document).ready(function($) {

$('#menu').waypoint('sticky', {
  wrapper: '<div class="sticky-wrapper" />',
  stuckClass: 'stuck'
});


});
</script>

jQuery正在将.stuck类添加到导航栏，但滚动行为不能正常工作 - 只应在.sticky-wrapper点击页面顶部时才添加.stuck，但它只是在页面加载时添加。

我做错了什么？

http://chuckagency.com/wordpress-new/的测试网站。

非常感谢！

Answer 1

您的#menu元素已经是.navbar-fixed-top。无论如何，它都固定在窗户的顶部。我不确定你认为添加Waypoints Sticky应该做些什么。值得注意的是，如果您已经承诺使用Bootstrap，那么您也可以使用Bootstrap自己的Affix插件来完成粘贴标题。

jQuery Waypoints - Sticky Navbar无效

1 个答案: