Question

我正在尝试在着陆页上创建此视差效果。对于jquery，请遵循本教程https://www.youtube.com/watch?v=WTZpNAbz3jg（跳到21:00）。

我现在正在创建该网站的jquery端，但我已经为该网站创建了一个js文件，并为着陆页创建了一个新文件（也试图将代码放在我的主js文件上。但无论如何，为了测试监听器和控制台，我有这个代码。

$(window).scroll(function(){

    console.log('h1')

});

此处还有我的主要js文件中的代码

$(document).ready(function(){

    $("#graphics").hide();
    $("#morew").hide();

//------------landing scroll---------------//   
    $(window).scroll(function(){

    console.log('h1')

});

    //------------Toggle---------------//

  $("#hideshow1").click(function(){
    $("#photography").slideToggle("slow");
    $("#graphics").slideUp("slow");

  });

   $("#hideshow2").click(function(){
    $("#graphics").slideToggle("slow");
    $("#photography").slideUp("slow");
  });

   $("#hsw").click(function(){
    $("#morew").slideToggle("slow")
   });

   $("#hsw2").click(function(){
    $("#morew").slideUp("slow")
   });

  //------------before and after---------------//

    //------------carousel---------------//



  //------------before and after functions---------------//


  $(".top").css("width", "50%");
  $(".ba").mousemove(function(e){

    // get the mouse x (horizontal) position and offset of the div
      var offset =  $(this).offset();
      var iTopWidth = (e.pageX - offset.left);

    // set width of bottomimage div
      $(this).find(".top").width(iTopWidth);
  });

 //-----------lightbox/fancybox js---------------//

 $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });




});

但显然两者都不起作用，这里也是我的html脚本链接

<script type="text/javascript" src="js\jquery.js"></script> 
    <script type="text/javascript" src="js\script2.js"></script>
    <script type="text/javascript" src="js\landing.js" defer></script>      
    <link rel="stylesheet" href="CSS\style2.css">

我还尝试在关闭的html标记之前放置“landing.js”脚本标记，并尝试添加“延迟”，但没有任何作用。如果有人可以提供帮助，我将不胜感激，也很抱歉，我只是从java / jQuery开始。

基本上：我只是想知道为什么滚动侦听器不能工作，我创建了另一个站点，只是为了测试它并且它工作正常。

Answer 1

这是否符合您的要求？

https://jsfiddle.net/6rp7g3kn/

使用window.onscroll而不需要jQuery：

window.onscroll = function(){

    $("#message").text(window.scrollY);

};

console.log和.scroll侦听器不起作用

1 个答案: