定位浏览器窗口大小?

时间:2018-06-22 01:46:01

标签: javascript css

我对JavaScript相当陌生,请原谅我的无知。我正在尝试修改此代码(来自HTML5up's prologue template),以便通过移动设备/平板电脑单击标题链接会导致较大的输入延迟(与其他环境相比)。当前,无论是在移动设备还是台式机上,单击导航链接时都有一些延迟(关闭导航栏是必需的)。我怀疑这是在main.js文件中发生的,但是我对JavaScript不够熟悉,无法进行任何修改。基本上,是否可以将delay变量修改为仅影响某些窗口大小,例如:

            if (skel.breakpoint == Wide)
                $('#header')
                    .panel({
                        delay: 5,
                    });
            if (skel.breakpoint == Normal)
                $('#header')
                    .panel({
                        delay: 5,
                    });
            if (skel.breakpoint == Narrow)
                $('#header')
                    .panel({
                        delay: 5,
                    });

            if (skel.breakpoint == Narrower)
                $('#header')
                    .panel({
                        delay: 500,
                    });
            if (skel.breakpoint == Mobile)
                $('#header')
                    .panel({
                        delay: 500,
                    });

在此文件中:

(function($) {

skel.breakpoints({
    wide: '(min-width: 961px) and (max-width: 1880px)',
    normal: '(min-width: 961px) and (max-width: 1620px)',
    narrow: '(min-width: 961px) and (max-width: 1320px)',
    narrower: '(max-width: 960px)',
    mobile: '(max-width: 736px)'
});

$(function() {

    var $window = $(window),
        $body = $('body');

    // Disable animations/transitions until the page has loaded.
        $body.addClass('is-loading');

        $window.on('load', function() {
            $body.removeClass('is-loading');
        });

    // CSS polyfills (IE<9).
        if (skel.vars.IEVersion < 9)
            $(':last-child').addClass('last-child');

    // Fix: Placeholder polyfill.
        $('form').placeholder();

    // Prioritize "important" elements on mobile.
        skel.on('+mobile -mobile', function() {
            $.prioritize(
                '.important\\28 mobile\\29',
                skel.breakpoint('mobile').active
            );

        });

    // Scrolly links.
        $('.scrolly').scrolly();

    // Nav.
        var $nav_a = $('#nav a.scrolly');

        // Scrolly-fy links.
            $nav_a
                .scrolly()
                .on('click', function(e) {

                    var t = $(this),
                        href = t.attr('href');

                    if (href[0] != '#')
                        return;

                    e.preventDefault();

                    // Clear active and lock scrollzer until scrolling has stopped
                        $nav_a
                            .removeClass('active')
                            .addClass('scrollzer-locked');

                    // Set this link to active
                        t.addClass('active');

                });

        // Initialize scrollzer.
            var ids = [];

            $nav_a.each(function() {

                var href = $(this).attr('href');

                if (href[0] != '#')
                    return;

                ids.push(href.substring(1));

            });

            $.scrollzer(ids, { pad: 200, lastHack: true });

    // Header (narrower + mobile).

        // Toggle.
            $(
                '<div id="headerToggle">' +
                    '<a href="#header" class="toggle"></a>' +
                '</div>'
            )
                .appendTo($body);

        // Header.


            // TODO: Refactor to only activate on mobile views
            $('#header')
                .panel({
                    delay: 500,
                    hideOnClick: true,
                    hideOnSwipe: true,
                    resetScroll: true,
                    resetForms: true,
                    side: 'left',
                    target: $body,
                    visibleClass: 'header-visible'
                });

        // Fix: Remove transitions on WP<10 (poor/buggy performance).
            if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
                $('#headerToggle, #header, #main')
                    .css('transition', 'none');



});

})(jQuery);

0 个答案:

没有答案