由 window 宽度确定的 scrollto 偏移量变量

Question

A window 宽度（视口）大于 [>=768] 我有一个 125px 的 scrollto offset 变量，这是我固定的 header 高度...一切都很好。我的问题是当 window 宽度小于 [<=767] 即移动设备时，我需要偏移量变量为 54px，因为我已将固定的 header 高度设置为 54px。

如何调整我的代码以获得此结果

 if($(window).width() >= 768)
    function scrollToID(id, speed) {
        var offSet = 125;
        var targetOffset = $(id).offset().top - offSet;
        var mainNav = $('#main-nav');
        $('html,body').animate({scrollTop: targetOffset}, speed);
        if (mainNav.hasClass("open")) {
            mainNav.css("height", "1px").removeClass("in").addClass("collapse");
            mainNav.removeClass("open");
        }
    }

Answer 1

好吧，在我看来，整个代码块仅在屏幕宽度大于 768px 时才有效...如果它更小，它就会毫无用处。我会这样设置。

$(window).on("resize load", function () {
            if($(window).width() >= 768) {
                var offSet = 125;
            }
            else{
                var offSet = 54;
            }
    });

function scrollToID(id, speed) {
        var targetOffset = $(id).offset().top - offSet;
        var mainNav = $('#main-nav');
        $('html,body').animate({scrollTop: targetOffset}, speed);
        if (mainNav.hasClass("open")) {
            mainNav.css("height", "1px").removeClass("in").addClass("collapse");
            mainNav.removeClass("open");
        }

或更好的是，您可以获取 css class，因此您永远不必手动设置它。

$(window).on("resize load", function () {
                var offSet = $('#yourheader').css('height');
});

由 window 宽度确定的 scrollto 偏移量变量

scrollto offset variable determined by window width

jquery

scrollto

offset