質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • jQuery

    6899questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    521questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQueryプラグイン「Fit Sidebar」で上に隙間を追加したい

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 241

snof

score 11

サイドバーが固定されるjQueryプラグイン「Fit Sidebar」を使用しています。

Fit Sidebar
https://github.com/cyokodog/jquery.sitekit/tree/gh-pages/fit-sidebar

実際のサイト
https://sirinova.com/

<div class="fit-sidebar-blank" style="border: 0px solid rgb(255, 255, 255); margin: 0px; padding: 0px; height: 393px; display: block;"></div>
<div class="sidefix fit-sidebar fit-sidebar-fixed" style="width: 336px; top: 0px; bottom: auto;">
<div class="space">広告</div>
</div>

現在、固定される要素にmargin-top: 25px!important;を追加しているのですが、これでは固定時以外でもmarginが効いてしまっています。

.fit-sidebar-fixed {
    position: fixed;
    margin-top: 25px!important;
    margin-bottom: 0!important;
}

そこで、要素が固定された状態でもtop: 0px;にならずtop: 25px;になるようにしたいのですが、jQueryをどのように改変すればいいのか教えてください。

element.style {
    width: 336px;
    top: 0px;
    bottom: auto;
}

イメージ説明

;(function($){
    var s = $.fitSidebar = function(target, option){
        var o = this, c = o.config = $.extend({}, s.defaults, option);
        c.target = $(target).addClass('fit-sidebar');
        c.blank = $('<div/>').addClass(s.id + '-blank').insertBefore(c.target);
        c.blank.css('border','solid 1px #fff');
        c.blank.css({
            'margin-top' : c.target.css('margin-top'),
            'margin-right' : c.target.css('margin-right'),
            'margin-bottom' : c.target.css('margin-bottom'),
            'margin-left' : c.target.css('margin-left'),
            'border-top-width' : c.target.css('border-top-width'),
            'border-right-width' : c.target.css('border-right-width'),
            'border-bottom-width' : c.target.css('border-bottom-width'),
            'border-left-width' : c.target.css('border-left-width'),
            'padding-top' : c.target.css('padding-top'),
            'padding-right' : c.target.css('padding-right'),
            'padding-bottom' : c.target.css('padding-bottom'),
            'padding-left' : c.target.css('padding-left')
        });
        c.wrapper = $(c.target).parents(c.wrapper);
        c._win = $(window)
            .on('scroll', function(){
                o.adjustPosition();
            })
            .on('resize', function(){
                c.target.hasClass('for-chrome-bug');
                o.adjustPosition();
            });
        setTimeout(function(){
            o.adjustPosition();
        },0);
    }
    $.extend($.fitSidebar.prototype, {
        adjustPosition : function(){
            var o = this, c = o.config;
            if(c._win.width() < c.responsiveWidth){
                c.wrapper.removeClass(c.fixedClassName);
                c.wrapper.addClass(c.noFixedClassName);
                c.target.removeClass(s.id + '-fixed');
                c.blank.hide();
                c.target.width('auto');
                c.direction = null;
                return;
            }
            c.wrapper.addClass(c.fixedClassName);
            c.wrapper.removeClass(c.noFixedClassName);
            c.target.addClass(s.id + '-fixed');
            var offset = c.blank.show().offset();
            var scrollTop = c._win.scrollTop()
            var outerHeight = c.target.outerHeight();
            var overHeight = outerHeight - c._win.height();
            if(overHeight < 0) overHeight = 0;
            if(!c.direction){
                c.lastFixedTop = c.lastDownFixedTop = c.lastUpFixedTop = offset.top - scrollTop;
                c.lastScrollTop = c.lastDownScrollTop = c.lastUpScrollTop = scrollTop;
            }
            c.target.width(c.blank.width());
            c.blank.height(c.target.height());
            c.direction = scrollTop < c.lastScrollTop ? 'up' : 'down';
            var adjustDown = function(){
                var top = c.lastUpFixedTop + (c.lastUpScrollTop - scrollTop)
                if(top < 0){
                    if(top + overHeight < 0){
                        top = -overHeight;
                        var limit = c.wrapper.offset().top + c.wrapper.height();
                        var pos = scrollTop + outerHeight + top;
                        if(pos > limit){
                            top = (limit - scrollTop) - outerHeight;
                        }
                    }
                }
                c.target.css({
                    top : top,
                    bottom : 'auto'
                });
                c.lastDownFixedTop = top;
                c.lastDownScrollTop = scrollTop;
            }
            var adjustUp = function(){
                var top = c.lastDownFixedTop + (c.lastDownScrollTop - scrollTop)
                if(top > 0){
                    top = offset.top-scrollTop;
                    if(top < 0) top = 0;
                }
                c.target.css({
                    top : top,
                    bottom : 'auto'
                });
                c.lastUpFixedTop = top;
                c.lastUpScrollTop = scrollTop;
            }
            if(c.direction == 'down'){
                adjustDown();
            }
            else{
                adjustUp();
            }
            c.lastFixedTop = top;
            c.lastScrollTop = scrollTop;
        }
    });
    $.fn.fitSidebar = function(option){
        return this.each(function(){
            var el = $(this);
            el.data(s.id, new $.fitSidebar(el, option));
        });
    }
    $.extend(s, {
        defaults : {
            wrapper : 'body',    // 各カラムを包括する親又は先祖要素
            responsiveWidth : 0,    // レスポンシブのブレークポイント
            fixedClassName : 'fit-sidebar-fixed-now',    // 固定時に wrapperパラメータ指定要素に割り当てられるクラス名
            noFixedClassName : 'fit-sidebar-no-fixed-now'    // 非固定時に wrapperパラメータ指定要素に割り当てられるクラス名
        },
        id : 'fit-sidebar'
    });
})(jQuery);
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • jQuery

    6899questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    521questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。