Blog

HOME > Web > javascript > 【jQuery】ページの高さによって指定を変える方法

【jQuery】ページの高さによって指定を変える方法

2018/01/23

javascript JQuery css

備忘録です。

先日のjQueryでCSSを追加・削除する記事の応用で、ページの高さによってcssやjsなどの指定を変える方法です。

HTML

<div id="hoge">テキスト</div>

js

<script type="text/javascript">
$(function() {
    var hdlist = $('#hoge');   
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            //トップから100pxでのjsやcssを指定
        } else {
            //100px未満でのjsやcssを指定
        }
    });
});
</script>

[サンプル]トップから高さ100pxになったときのCSS（文字色）を指定

<script type="text/javascript">
$(function() {
    var hdlist = $('#hoge');   
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1000) {
            //トップから100pxで文字色赤
            $('#hoge').css('color', '#0000FF');
        } else {
            //それ以外は文字色青
            $('#hoge').css('color', '#FF0000');
        }
    });
});
</script>

サンプル
文字の色が変わります

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ