Question

我在弹性框中完成了导航

  <nav class="navbar-highlight">
    <div class="nav-main">
      <div class="navigation">
        <div class="nav-brand"><a href="#home">Coco Rock Cafe</a>
        </div>
        <div class="nav-item"><a href="#first">Mission</a>
        </div>
        <div class="nav-item"><a href="#second">Our store</a>
        </div>
        <div class="nav-item"><a href="#third">Our story</a>
        </div>
        <div class="nav-item"><a href="#fourth">Take-a-Way</a>
        </div>
      </div>
    </div></nav>

因此，当视口发生变化时，nav高度也随之变化（在较小的视点上变高）。另请注意，导航不是display: fixed;

我想弄清楚在jQuery中使用波纹管代码时如何扣除当前导航高度

  $('.nav-item a, .nav-brand a, .footer a, .button').click(function() {
    var $navHeight = $('.nav-main').height();
    event.preventDefault(); // default action of the event will not be triggered, eg will not change links name

    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - $navHeight
    }, 1500);
    return false;
  });

或者至少有人可以告诉我如何干这段代码？

  $('.nav-item a, .nav-brand a, .footer a, .button').click(function() {
    event.preventDefault(); // default action of the event will not be triggered, eg will not change links name
    var windowSize = $(window).width();

    if (windowSize >= 769) {
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 51
    }, 1500);

    }
    else if (windowSize <= 768) {
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 102
    }, 1500);

    }

    return false;
  });

Answer 1

您的代码似乎很好，但从我的角度来看，您在回调函数中错过了event。

$('.nav-item a, .nav-brand a, .footer a, .button').click(function(event) { // miss an `event` here, which may cause an Error in console
  var $navHeight = $('.nav-main').height();
  event.preventDefault(); // default action of the event will not be triggered, eg will not change links name

  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top - $navHeight
  }, 1500);

  return false;
});

我认为您忘记了event作为回调函数的参数，因此在您的$('html, body').animate代码之前出现错误，它将无法按您的意愿运行。添加event后，有什么问题吗？可以自由更新问题，我会尽力帮助您！

从offset（）。顶部扣除

1 个答案: