Question

我有一个脚本的两个部分，用于计算标题和jumbotron的高度以设置偏移高度，然后在第一部分中：

var offsetHeight = "";

在从外部链接触发时打开引导选项卡并滚动到偏移...

$(document).ready(function () {
    function navHash() {
        var hash = document.location.hash;
        if (hash) {
            history.replaceState('', document.title, window.location.pathname);
            $('.nav-stacked a[href="' + hash + '"]').tab('show');
            offsetHeight = $('header').outerHeight() + $('.jumbotron').outerHeight();
            $('html, body').animate({
                scrollTop: offsetHeight
            }, 50);
        }
    }
    navHash();
    $(window).on('hashchange', navHash)
});

下一部分只是在单击标签链接并打开新标签时重复滚动行为。

$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
    offsetHeight = $('header').outerHeight() + $('.jumbotron').outerHeight();
    $('html, body').animate({
        scrollTop: offsetHeight
    }, 50);
})

我仍然有点难过，因为这一切都在网站的静态版本中运行良好。但是当放入Wordpress模板时，它会中断。似乎正在发生的事情是，WP版本菜单中的“下拉”项目正在扩展，然后在最终呈现页面后折叠。当您在慢速连接上加载站点时，您可以看到这一点，或者在我的情况下，我必须添加一个javascript警报，以便在“文档就绪”状态下暂停页面呈现。你看到的结果是导航高度像900+像素，下拉项目扩展。只要您关闭警报，项目就会折叠到下拉列表中，页面会正常呈现。上面的脚本将页面设置为错误的位置，因为标题和jumbotron的计算偏移高度（在文档准备好时）是错误的。这种行为似乎是由于WP进行数据库查询以生成菜单。这可以解释为什么我们没有在网站的静态版本中看到这一点，因为菜单链接被硬编码到HTML中。

奇怪的WP菜单行为和计算jquery的偏移高度

0 个答案: