0

私は何日もこれにこだわっています。私はそれを把握することはできません。

クライアントの要求に応じて、コンテンツ ページでカスタム アンカー リンクを使用している Wordpress ページがあります。ナビゲーションからアンカー リンクをクリックすると、固定ヘッダーの後ろにコンテンツが流れます。このコンテンツが途切れないように、固定ヘッダーの下に表示する必要があります。

私はプラグイン、css、ストレート jquery などを試しました。私はこれを機能させることができません。

サイトはこちらです。ドロップダウン ナビゲーション リンクの 1 つをクリックすると、私の言いたいことがわかります。

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

助けてください。私はここで必死になっています。

4

1 に答える 1

0

編集

これを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;
    });
});

古いコメント

私が言わなければならないことが2つあります：

  1. カスタム アンカー リンクを追加した方法が間違っています。URL の代わりhttp://www.zachkeller.net/cp_site/approach#methodにhttp://www.zachkeller.net/cp_site/approach/#method. 末尾のスラッシュに注意してください。

  2. あなたの問題については、簡単なCSSハックでうまくいくかもしれません：

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

それがあなたの望むものでないなら、私に知らせてください。より包括的な jQuery ソリューションを提供します。

于 2013-09-08T16:56:37.843 に答える