jQueryとcssに関するow_ukeguchiのブックマーク (2)

  • アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点

    fixedになるとコンテンツの高さが変わる 最近ナビゲーション部分をウィンドウ上部までスクロールするとposition:fixedに切り替わってスクロール時に上部に配置され追随されるものがあるがWebページ内のナビゲーションがfixedに切り替わるとコンテンツから高さがその分引かれるためナビゲーションがアンカーリンク先への遷移の場合、正しく目的のところまで遷移できなくなってしまう。 例えばWebページ内の高さが2140pxでナビゲーションの高さが70pxのfixedになることで2140px-70px=2070pxとなりその分アンカーリンクの位置も変わるため正しく遷移できなくなる。 fixed時にアンカーリンクで正しく遷移できないサンプル ナビゲーションの高さを取得して計算する ナビゲーションの高さを取得してアンカーリンククリック時の移動位置を補正し、fixedになったときは失った高さ分を追

    アンカーリンクのナビを置いてスクロールでfixedに切り替えるときの注意点
    ow_ukeguchi
    ow_ukeguchi 2015/11/30
    アンカーの調整
  • [JS]IEでフォームのselect要素の中身が省略されてしまうのを解消するスクリプト -ieSelectWidth

    IEでフォームのselect要素にwidthを指定した際、はみ出した箇所が省略されてしまうのを解消するスクリプトを紹介します。 Internet Explorer Select Width Bug Workaround デモページ 対応ブラウザは2010年6月17日の時点でIE6, 7, 8で、スクリプトを使用すると他のブラウザ(Firefox, Chrome, Safari, Opera)と同様に省略されずに表示されるようになります。 ※IE6には別途bgiframe Pluginが必要です。 スクリプトでは他の機能として、スクリプト側でのwidth指定、margin/padding/borderの設定も可能です。 設置は簡単で、既存のフォームにも簡単に適用できます。 jquery.jsとjq.ie-select-width.jsを外部ファイルで記述し、下記のスクリプトを記述します。 J

  • 1