タグ

固定に関するyo-11-06のブックマーク (4)

  • ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん!

    こんにちはこんにちは!! 夏ですね! 真夏ですね!! ところで最近、ライブドアの一部の人気ブログで、サイドバーの挙動に「んん?」って思ったことありませんか! …百聞は一見にしかずってことで、実際の例をみてみましょう! ※PC版のみです ハムスター速報 (左のサイドバーを見ながら、下にスクロールしてください) 痛いニュース(ノ∀`) (右のサイドバーを見ながら、下にスクロールしてください) ある程度スクロールすると、サイドバーの広告がぴたっと固定されますね! これって流行りなんでしょうか…! そんなわけで、もしかしたら同じことをやりたい人が他にもいるのかも?と思って、 コピペで使えるJavaScriptにしてみました! ↓ 動作サンプルです! スクロールしたらサイドバーの広告を固定するスクリプトの動作サンプル ↓ コードはこれです! 適当にコピペしてブログに貼り付けてね! <script t

    ライブドアみたいにスクロールしたらサイドバーの広告を固定する - ぼくはまちちゃん!
  • jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン

    jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグインを公開します。 このプラグインは、下記のサイトで紹介されているサンプルをプラグイン化し、機能を追加したものです。 PersistentHeaders 1.サンプル サンプルを用意しました。スクロールすると各コンテンツのヘッダー部分がページ上部に固定されます。また、ヘッダーを含んだコンテンツがページから消えると固定されていたヘッダーも消えます。 サンプル 2.プラグインのダウンロード 以下のリンクからプラグインをダウンロードして、ファイル名を「jquery.persistentheaders.js」にリネームしてください。 jquery.persistentheaders_0.0.1.js jquery.persistentheaders_0.0.2.js 以下、設定方法です。 3.HTML H

    jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン
  • CSSでモーダル・ウィンドウ

    pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの? Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単! デモのようにposition: fixed;とかしておくとよりら

    CSSでモーダル・ウィンドウ
    yo-11-06
    yo-11-06 2011/10/24
    ちょうど今モーダルウィンドウを探してたトコだった
  • jQueryでスクロールしても上に固定されるメニュー|Webpark

    よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー(このブログは非表示にしてます)みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =

    jQueryでスクロールしても上に固定されるメニュー|Webpark
  • 1