用jquery定位元素的顶部属性

Question

我有一个恼人的问题，试图定位响应导航汉堡包。我正在使用一个名为响应菜单的插件，它创建了汉堡包，并使用绝对定位。

我一直试着把汉堡放在头球的中心位置。为了实现这一点，我使用了以下jQuery代码。

不过，我遇到的问题是，当汉堡包被显示时，你会向下滚动页面，然后快速回滚到页面的顶部。汉堡包没有将自己定位在头部的中心位置。你需要稍微向下滚动，这样它才能跳到正确的位置。

请告诉我怎么解决这个问题。它快把我逼疯了，我对jquery不太了解：

(谢谢各位事先提出的意见:)

链接到有关站点

$( window ).on("load resize scroll", function(e){
  var headerHeight = $('nav').height()/2;
  var iconHeight = $('#click-menu').height()/2;
  var total = headerHeight - iconHeight;
  if ($(window).scrollTop() >= 1) {
  $('#click-menu').css('top', total);
  }
  else {
      $('#click-menu').css('top', total);
  }
});

Answer 1

这对我来说很难测试和确认，但是我相信当它击中顶部的时候它的位置被关闭的原因是因为$('nav').height()/2;的评估会立即发生，但是头部的大小会超过300 ms。

虽然有点麻烦，但我认为您可以通过添加一个setTimeout来解决这个问题

function setNavTop(){
    var headerHeight = $('nav').height()/2;
    var iconHeight = $('#click-menu').height()/2;
    var total = headerHeight - iconHeight;
    $('#click-menu').css('top', total);
}

$( window ).on("load resize scroll", function(e){

    if ($(window).scrollTop() >= 1) {
        setNavTop();
    }
    else {
        setTimeout(setNavTop, 300); // wait for header to animate to size.
    }
});

因为它必须延迟300毫秒才能调整图标，它看起来有点小问题。您可以通过添加推特setTimeout来改进这一点。不是最优雅的，但它很有效

setNavTop();
setTimeout(setNavTop, 100);
setTimeout(setNavTop, 200);
setTimeout(setNavTop, 300);