jQuery：设置if else语句以根据浏览器宽度执行偏移

Question

完成一个视差，一页的页面，并且我有一个固定的导航，所以我必须抵消页面上各个div的/部分，以免它们掉到最前面。 问题是针对不同的浏览器宽度执行此操作，因为我的固定导航在手机上的高度大约是在台式机上的一半。

试用此jQuery，它似乎仅执行else操作，而不执行if。 因此，偏移量在移动设备上过多。 这是我目前正在使用的：

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.main-navigation a[href^="http://example.com/#"]' ).click(function() {
      if (jQuery(window).width() < 677) {
        jQuery.scrollTo( this.hash, 1000, { easing:'swing', offset:-20 });
      } else {
        jQuery.scrollTo( this.hash, 1000, { easing:'swing', offset:-141 });
      } 
    });
  });
</script>

Answer 1

我认为这将提供一个响应更快的解决方案：

    $(document).ready(function() {
    $.resizeContentHeight = function(){
        $('#main-content').css("margin-top", $(".header-fixed").height());
    }
$(window).load(function() {
    $.resizeContentHeight();
});
$(window).resize(function() {
    $.resizeContentHeight();
});
});

在此JSfiddle中，我计算了.header-fixed的高度，并将其作为margin-top到其下面的内容（ #main-content ）。 我认为这就是您要实现的目标吗？ 我已经对此进行了测试并对其进行了修改，以使其可以在多个浏览器中使用。 如果您可以提供您正在使用的HTML的示例，则不确定视差站点中是否有用。 如果用户更改设备的方向，这也将进行调整。

这也可以适合于增加或移除锚链的头部的高度。