Question

尝试向此添加一个resize函数，允许此脚本底部的if else语句根据窗口宽度进行更新，并刷新并调整大小。除非单击英雄上的向下箭头按钮，否则一切都正常工作，调整大小时不会更新偏移顶部值。

现有脚本 -

$(function() {
  var windowW = $(window).width();
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  });
});

我尝试过的事情 - 这种接缝可以打破它。

$(window).resize(function(e) {
  var windowW = $(window).width();
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  });
});

DEV LINK http://www.alexcoven.com/dev/element

Answer 1

你可以尝试在调整大小时更新windowW变量吗？以下变体还会在每次新点击时重新'a[href*="#"]:not([href="#"])'。如果不成功，请通过评论反馈？

$(function() {
  var windowW = $(window).width();
  $(window).resize(function(){
    windowW = $(window).width();
  });
  $('body').on('click', function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  },'a[href*="#"]:not([href="#"])');
});

Answer 2

感谢@ Sam0这是适合我的脚本

$(function() {
  var windowW = $(window).width();
    $(window).resize(function(){
    windowW = $(window).width();
  });
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if ((target.length) && (windowW > 770)) {
        $('html, body').animate({
          scrollTop: (target.offset().top) + 2
        }, 450);
        return false;
      } else {
          $('html, body').animate({
            scrollTop: (target.offset().top) - 86
          }, 450);
          return false;
      }
    }
  });
});

我需要添加的是一个在resize上更新windowW变量的函数！

不确定如何正确执行调整大小功能更新

2 个答案: