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

Question

尝试为此添加一个调整大小功能，允许此脚本底部的 if else 语句根据 window 宽度进行更新，同时进行刷新和调整大小。一切正常，除非单击英雄上的向下箭头按钮时偏移顶部值不会在调整大小时更新。

当前脚本到位 -

$(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;
      }
    }
  });
});

发展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;
      }
    }
  });
});

我需要添加的只是一个在调整大小时更新 windowW 变量的函数！

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

Not sure how to properly execute resize function update

css

jquery

scroll

resize

function