読者です 読者をやめる 読者になる 読者になる

"Diary" インターネットさんへの恩返し

いつもソースコードコピペばかりなので,みなさまへ少しばかりの恩返しを

【CSS】スクロールしても画面の端にバナーを固定表示する方法



スポンサーリンク

よくある、Follow me!とかFeedbackリンクが画面端に固定されていて、スクロールしても動かないように設定する方法。

・html

<!-- どこでもいいので --> 追加
<div id="fb-link">Feedback</div>

css

#fb-link{
cursor:pointer;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: fixed;
z-index: 9999;
}

javascript

//画面の中央左端に寄せるスクリプト
function showFeedbackLink(){

    var h = jQuery(window).height();
    var w = jQuery(window).width();

    $('#fb-link').css({
		top : Math.floor(h/2),
		left  : -20,
		background : "#000",
		"display":"block"
	});
}

//showFeedbackLink()をリサイズの時や初期ロード時に読込
$(window).resize(function(){
     showFeedbackLink();
});

showFeedbackLink();