我对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);