Question

我是javascript的初学者，我使用jsfiddle创建了一个导航栏，当用户向下滚动时会出现。

当我将代码复制到Dreamweaver时，它不再有效吗？

我已经研究了，并且说了一些关于添加jquery框架的东西？或者有没有办法在没有框架的情况下做到这一点？

链接到jsfiddle以获取完整代码：http://jsfiddle.net/fNn7K/270/

javascript：

$(window).on('scroll', function () {
  console.log($(this).scrollTop());
   if ($(this).scrollTop() > 50) {
     $('.nav').addClass('visible');

   }else if ($(this).scrollTop() <= 50 && $('.nav').hasClass('visible')) {
      $('.nav').removeClass('visible');
   }

});

Answer 1

如果没有jQuery，你可以这样做：

window.onscroll = function() {
    var display = document.body.scrollTop > 150 ? 'inline' : 'none',
        elems   = document.getElementsByTagName('nav');

    for (var i=0; i<elems.length; i++) {
        elems[i].style.display = display;
    }
}

FIDDLE

Answer 2

当我将代码复制到Dreamweaver时，它不再有效吗？

JS Fiddle基于几个用户输入的数据组装页面。其中一个数据是选择一个库。

您必须将代码复制到文档中的正确位置并包含相同的库。

即使这样，Dreamweaver的预览模式也可能无法显示，因为它们（或者至少是）非常糟糕。你是否在真实的浏览器中进行测试。

我已经研究过了，并且说了一些关于添加jquery框架的东西吗？

你需要jQuery库来使用jQuery方法，是的。

或者有没有办法在没有框架的情况下做到这一点？

jQuery只是其他人编写的一些JavaScript。你可以复制它做的任何事情。尽管如此，逐行重写代码以不使用jQuery将超出stackoverflow的范围。

Answer 3

您需要在代码中添加jquery.js文件（Dreamweaver）..

在<head>代码

之间添加此内容

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

在你提供的小提琴中，jquery已经加载了......所以你没有得到那个错误。

并且不要忘记将你的代码包装在document.ready函数中（这已经在小提琴中添加了）..

 $(function(){
     $(window).on('scroll', function () {
       .....
     });
 });

未捕获的ReferenceError：$未定义？的jsfiddle

3 个答案: