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示例，那么不确定这是否与视差网站相关。如果用户更改其设备的方向，也会进行调整。

这也可以用于添加或删除标题到锚链接的高度。

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

1 个答案: