0

我是 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');
   }

});
4

3 回答 3

2

没有 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;
    }
}

小提琴

于 2013-05-16T13:46:29.383 回答
1

当我将代码复制到 Dreamweaver 时它不再起作用？

JS Fiddle 根据几条用户输入的数据组装一个页面。这些数据之一是图书馆的选择。

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

即使那样，Dreamweaver 的预览模式也可能不会显示出来，因为它们（或至少是）非常糟糕。您是否在真实的浏览器中进行测试。

我已经研究过，它说了一些关于添加 jquery 框架之类的东西？

您需要 jQuery 库才能使用 jQuery 方法，是的。

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

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

于 2013-05-16T13:27:52.697 回答
1

您需要在代码中添加 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 () {
       .....
     });
 });
于 2013-05-16T13:28:05.650 回答