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

jquery 位置

javascript jquery

jQueryで位置制御

結構スクロールしたら追従させるメニューとかスクロールがここまできたら表示させるとかありますよね?

その制御に重要な関数を紹介!

要素のドキュメント上での表示位置

  • offset()

    最初の要素の、ドキュメント上での表示位置を返します。

    戻り値のオブジェクトはtopとleftの2つの数値を持ちます。この関数は、可視状態にある要素に対してのみ有効です。

$("h1").offset().top   // 要素の頭位置
$("h1").offset().left // 要素の左側の位置

要素のスクロール位置

  • scrollTop()

    最初の要素の現在のスクロール上の上位置を取得します。

    この関数は、要素の表示/非表示状態にかかわらず機能します。

$('div').scroll(function(){
  console.log($(this).scrollTop()); // スクロールで値が変わる!!
});

この二つを比較することでスクロール位置によって要素の操作が可能になりますね。

jQuery

javascript jquery

jQueryでクラスの制御

jQueryはよく使うんですが、よく使い方忘れるので、書いておきます。

// 追加
$("div").addClass("red")

// 除去
$("div").removeClass("blue")

// トグル
$("div").toggleClass("blue")

// トグルのオンオフ制御
$("div").toggleClass("blue", i%3 == 1)

  • toggleClass(class)
    • 指定したCSSクラスが要素に無ければ追加し、あれば削除する。
  • toggleClass(class, switch)
    • 指定したCSSクラスをswitchがtrueであれば追加し、falseなら、削除する。

注意するのは、与える引数にクラスであることを示す.を書かずクラス名を記述するということ。

以上!

Markdownの書き方

markdown

Markdownの書き方

マークダウン記法はよく使うので、 練習も兼ねてブログに落とします。

(というかただのSandBox...)

見出し

記述例

# h1
**太字!**
__太字!__


## h2
*イタリック*
_イタリック_

### h3

* list1
    * list 1_1
        * list 1_1_1
+ list2
    + list2_1
    + list2_2
- list3

1. num list1
2. num list2
3. num list3
5. num list4


#### h4
引用
> 引用になります
> 複数行にわたっているのも
> こんな感じで記述になるんだなー
>> 二重引用も思いのまま
>> へー。

`fmt.Println("%s", value)`
<pre>
package main

func Main() {

}
</pre>

[参考] (http://qiita.com/tbpgr/items/989c6badefff69377da7)

h1

太字! 太字!

h2

イタリック イタリック

h3

  • list1
    • list 1_1
      • list 1_1_1
  • list2
    • list2_1
    • list2_2
  • list3

  • num list1

  • num list2
  • num list3
  • num list4

h4

引用

引用になります 複数行にわたっているのも こんな感じで記述になるんだなー

二重引用も思いのまま へー。

fmt.Println("%s", value)

package main

func Main() {

}

[参考] (http://qiita.com/tbpgr/items/989c6badefff69377da7)