Question

function mobileNavTop () {
  if($('#mobile-navigation').offset().top <= 25) {
    $('#mobile-navigation').css({'position':'absolute', 'right':'0', 'top':'18px'});
    $('.jq1').css({'position':'absolute'});
    $('.move_up').hide();
  } else {
    $('#mobile-navigation').removeAttr('style');
    $('.jq1').removeAttr('style');
    $('.move_up').removeAttr('style');
  }
}
$(document).ready(function(){
  move_up = $('.move_up');

  $('.move_up').click(function(){
    $('html, body').animate({ scrollTop: 0 }, 'slow');
  });

  if ($('#mobile-navigation').offset().top <= 25) { move_up.hide(); }

  mobileNavTop();
});

$(window).scroll(function(){
  mobileNavTop();
});

我的想法是，当导航从顶部滚动低于25px时，会发生一点css。这适用于document.ready，但不适用于scroll（由于任何原因，它不会removeAttr('style')。这会导致什么原因？

修改

如果我向上滚动（在offset().top > 25时加载页面），它会起作用，但如果我向下滚动则不行。

Answer 1

滚动事件也必须在document.ready函数内。

$(document).ready(function(){

   $(window).scroll(function(){
     mobileNavTop();
  });
});

一些建议：

var您错过了move_up = $('.move_up');，这将使move_up成为全局变量，并且当您引用jquery包装对象时也是如此。它的好用$move_up。

$(document).ready(function(){
  var $move_up = $('.move_up');

  $move_up.click(function(){
    $('html, body').animate({ scrollTop: 0 }, 'slow');
  });

  if ($('#mobile-navigation').offset().top <= 25) { $move_up.hide(); }

   $(window).scroll(function(){
     mobileNavTop();
  }).trigger("scroll");

});

Answer 2

您必须将scroll功能包含在$(function(){标记内。尝试以下一个：

$(function(){
$(window).scroll(function(){
    if($(document).height()==$(window).scrollTop()+$(window).height()){
        alert('I am at bottom');
        //mobileNavTop();
});

选中此JSFIDDLE

Answer 3

<script>
jQuery(document).ready(function($) {
$(window).scroll(function () {
    if ($(document).scrollTop().valueOf() > 25) { 
        //code
    }
    else{
        //code
    }
});
});
 </script>

为什么JS不在滚动上调用函数？

3 个答案: