Question

窗口宽度（视口）大于[＆gt; = 768]我有一个125px的scrollto偏移量变量，这是我固定的标题高度......一切都很好。我的问题是当窗口宽度小于[＆lt; = 767]，即移动设备时，我需要将偏移量变量设置为54px，因为我的固定标头高度为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类，所以你永远不必手动设置它。

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

scrollto偏移量由窗口宽度决定

1 个答案: