Question

我在两个不同的功能中使用此变量时遇到问题。首先，我计算从窗口顶部到视图中的元素所需的偏移量（离开空间变量）。然后，我有两个不同的功能需要使用它，但我不能让它工作。

jQuery(document).ready(function($) {

$(function() {

  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

  if (topbar_o_height > 0) {
    if ($('.nav').hasClass('menu-fixed-topbar')) {  
        var spacing = 10;
    } else {
        var spacing = 30;
    }
  } else {
    var spacing = 10;
 }

 var extra_height = topbar_o_height + nav_o_height + spacing;

 var leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu

} // end function


$(".link_scroll").click(function(event){        
  event.preventDefault();
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
}

}); // End doc ready

Answer 1

您需要更改离开空间变量的样条，尝试在就绪函数中声明它：

jQuery(document).ready(function($) {
  var leavespace;

  $(function() {

  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

      if (topbar_o_height > 0) {
        if ($('.nav').hasClass('menu-fixed-topbar')) {  
          var spacing = 10;
       } else {
           var spacing = 30;
       }
     } else {
        var spacing = 10;
     }

    var extra_height = topbar_o_height + nav_o_height + spacing;

    leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu

 } // end function


$(".link_scroll").click(function(event){        
  event.preventDefault();
// you can now access leavespace here
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
/// you can now access leavespace here
}

}); // End doc ready

Answer 2

在这种情况下，您可以使用两种情况

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

  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

  if (topbar_o_height > 0) {
    if ($('.nav').hasClass('menu-fixed-topbar')) {  
        var spacing = 10;
    } else {
        var spacing = 30;
    }
  } else {
    var spacing = 10;
 }

 var extra_height = topbar_o_height + nav_o_height + spacing;

 leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu

} // end function


$(".link_scroll").click(function(event){        
  event.preventDefault();
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
}

}); // End doc ready

或

使用window.leavespace也可以解决您的问题感谢

Reference

Answer 3

为什么同时有两个dom就绪函数。你可以保留document.ready一个删除$（function（）{因为这两个意味着这样的事情，离开空间将有范围，并将在函数内部看到同样，你的代码看起来应该像

jQuery(document).ready(function($) {


  var topbar_o_height = $(".ipro_topbar").outerHeight();
  var nav_o_height = $(".nav").outerHeight();

  if (topbar_o_height > 0) {
    if ($('.nav').hasClass('menu-fixed-topbar')) {  
        var spacing = 10;
    } else {
        var spacing = 30;
    }
  } else {
    var spacing = 10;
 }

 var extra_height = topbar_o_height + nav_o_height + spacing;

 var leavespace = $(this.hash).offset().top - extra_height; // leave space for top menu


$(".link_scroll").click(function(event){        
  event.preventDefault();
  $('html,body').animate({scrollTop:leavespace}, 'slow');
});

if (document.location.href.indexOf('#') > -1 ) {
    // will use the leavespace variable here too...
}

}); // End doc ready

在两个不同的函数中使用jQuery变量

3 个答案: