jquery - 使 wordpress 自定义锚链接在固定标题下方滚动

Question

我已经坚持了好几天了。我想不明白。

我有一个 Wordpress 页面，它根据客户的要求在内容页面上使用自定义锚链接。当从导航中单击锚链接时，内容会在我的固定标题后面流动。我需要此内容出现在固定标题下方，以免被截断。

我试过插件、css、直接jquery，你说的。我无法完成这项工作。

网站在这里，如果您单击下拉导航链接之一，您会明白我的意思。

http://www.zachkeller.net/cp_site/about#company

请帮忙。我在这里越来越绝望。

Answer 1

编辑

这是一种使用 jQuery 的方法。由于我没有测试它，所以可能会有一些错误。让我知道：

jQuery(document).ready(function($) {
    var scrollOffset = $('.header-wrapper').outerWidth();
    $('#nav a').on('click', function(e) {
        var regex = new RegExp(/\#(.*)/),
        url = $(this).attr('href'),
        search = url.match(regex);

        if(search === null || search[1] === '') {
            return true;
        }

        var element = $('#' + search[1]);
        if(element.length) {
            e.preventDefault();
            var scrollTo = element.offset().top - scrollOffset - 20;
            $('html, body').animate({
                scrollTop: scrollTo
            }, 'fast');
            return false;
        }
        return true;
    });
});

旧评论

我需要说两件事：

1. 您添加自定义锚链接的方式是错误的。而不是 URLhttp://www.zachkeller.net/cp_site/approach#method它应该是http://www.zachkeller.net/cp_site/approach/#method. 注意尾部的斜杠。

2. 现在对于您的问题，快速的 CSS hack 可能会帮助您：

   .blog-inside > div {
       padding-top: 110px;
   }
   

如果那不是您想要的，请告诉我。我会给出一个更全面的jQuery解决方案。