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

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

新規登録して質問してみよう
ただいま回答率
85.48%
jQueryプラグイン

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

jQuery

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

Q&A

0回答

1725閲覧

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

snof

総合スコア17

jQueryプラグイン

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

jQuery

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

0グッド

1クリップ

投稿2018/06/17 08:35

サイドバーが固定される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);

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問