如何在向下滚动时修复菜单答案

【问题标题】：how to fix a menu on scroll down如何在向下滚动时修复菜单
【发布时间】：2015-01-15 15:52:18
【问题描述】：

我在我的网站 moroccoside.com 上修改了一个菜单，并尝试在使用 jquery 到达菜单后对其进行修复

我在标题上使用了这个 jquery 代码，但它不起作用

   <script>
   var stickyOffset = $('.header-wrapper').offset().top;

   $(window).scroll(function(){
   var sticky = $('.header-wrapper'),
   scroll = $(window).scrollTop();

   if (scroll >= stickyOffset) sticky.addClass('fixed');
   else sticky.removeClass('fixed');
   });
   </script>

这里是固定的css类

   .fixed {position:fixed; z-index: 9999;}

注意：我将脚本放在头文件中，而不是来自外部 js 文件

任何帮助都会如此感激

【问题讨论】：

请定义“它不起作用”。您希望代码做什么，它会做什么？
可能是 DOM 尚未加载的问题。尝试将所有内容包装在 $(document).ready(function(){ }); 中，然后，如果它不起作用，请检查控制台是否有错误，或尝试调试正在使用的值。
查看此代码笔：codepen.io/ianaya89/pen/dPpVbM
我希望它在向下滚动时修复 .header-wrapper 类

标签： javascript jquery css header fixed

【解决方案1】：

在运行之前，您需要确保 DOM 已加载。试试这个：

$(document).ready(function(){
  var stickyOffset = $('.header-wrapper').offset().top;

   $(window).scroll(function(){
   var sticky = $('.header-wrapper'),
   scroll = $(window).scrollTop();

   if (scroll >= stickyOffset) sticky.addClass('fixed');
   else sticky.removeClass('fixed');
   });
)};

【讨论】：

还没有起作用，我必须将它添加到一个js文件中然后调用它吗？或者它甚至应该可以将其嵌入到
这应该在<body>的底部，在结束标签之前，在<script>标签内。

【解决方案2】：

您忘记包裹在document.ready 函数中。试试这个：

jQuery(document).ready(function($){
  var stickyOffset = $('.header-wrapper').offset().top;

   $(window).scroll(function(){
     var sticky = $('.header-wrapper'),
     scroll = $(window).scrollTop();

     if (scroll >= stickyOffset) sticky.addClass('fixed');
     else sticky.removeClass('fixed');
   });
});

【讨论】：

同样不起作用
最后一行有错误。请复制我的整个代码并粘贴到您的页面中。
它给出错误“Uncaught TypeError: Property '$' of object [object Object] is not a function (index):91 (anonymous function)”