は、混乱を避けるためにページ

異なる時点でのクラス/ IDを追加し、あなたが読む前に、これは例えば、<section id="smaller">はそれはクラスを追加し、「どのように多くのピクセルダウン」が、で、ではありません。私はjavascriptには新しいので、塩の粒でそれを取ってください。ありがとう。は、混乱を避けるためにページ

ヘッダーファイルに新しい属性クラスを追加してヘッダーを変更しようとしています。次のコードは、幅が変わらないときにデスクトップ上で動作しますが、電話やデザインが応答性がある場合はどうなりますか？はい、これはまさに私があなたの助けを必要とする理由です。私はすでにたくさんのことを試していましたが、私が望むようにこの設定をどうやって得るのか分かりません。私はWeb開発者には新しく、これは私の最初のいくつかのWebサイトの1つです。

私のコード今：私はクリアする必要がある、および/またはあなたは少し混乱している場合は、物事の

function init() { 
    window.addEventListener('scroll', function (e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header"); 
     if (distanceY > 606) { 
      header.setAttribute("class", "smaller"); 
     } else { 
      header.removeAttribute("class"); 
     } 
    }); 
} 
window.onload = init();

カップル：

ヘッダは、実際の<header>ではありませんdivはヘッダークラスまたはIDで指定します。
私が言ったように、これは今の仕事が、私はちょうど<body>タグの終了前にリンクされているのjsファイルにこのコードを含めています、すべての画面サイズ
ための固定幅のためにのみ有用ですありません。変更が

を発生したとき

「606」はピクセル単位でページダウン長さでは、Webページ上の特定の場所に到達したときに、ヘッダーに属性を追加する方法はありますか？とにかく私にいくつかの指導を与えることができれば、それは素晴らしいことでしょう。これを読んで残りの1日を楽しんでいただきありがとうございます。 :)

出典

2016-04-04 hermitspike

element.getBoundingClientRect()を使用して、オブジェクトの画面位置情報を取得します。これは、あなたの仕事のために、底、高さ、左などを含むオブジェクトを与えるでしょう。あなたはtopとheightを使いたいかもしれません。 window.innerHeightと組み合わせて、あなたが望むものをコーディングすることができます。

window.addEventListener('scroll', function() { 
    var r = header.getBoundingClientRect(); 
    if (r.top < 300) 
     header.setAttribute("class", "smaller"); 
    else 
     header.removeAttribute("class"); 
});

はしかし、「CSSメディアクエリ」を見て、これを行うには、おそらくより良い方法があり、彼らはあなたがあなたのページが応答するために必要な場合がありますほとんど何を提供します。

出典

2016-04-04 10:24:20 ZPiDER

実装を依頼するのは多すぎるでしょうか？：P申し訳ありません、ちょっとちょっと圧倒されました。大変感謝しています。ありがとう！ – hermitspike

私はいくつかの実装例を追加しましたが、あなたが何をしようとしているのか正確にはわかりませんが、このコードは画面上の300pxを超える要素にクラスを追加します。ヒント：JSを初めて使うときはjQueryを見てください。エレガントなやり方で多くの助けになります。 – ZPiDER

@carambaによって投稿されたもう1つの答えは、私の目標について説明するのを助けました。=要素がページ上のどこにあるかを最初に確認し、それを 'distanceY'に設定すれば、残りのコードを引き続き使用できます。これはそれを行う方法ですが、あなたが理解するのを助けるはずです...うまくいけば。あなたの答えをありがとう、私はそれを見て、それを試してみます。 – hermitspike

私は.position();でそれを行う方法を考え出しました。ここに私の説明があります：

#sub-servicesの位置を取得したい要素です。

elは、#sub-servicesの位置です。

smallerは、<header>に追加されたクラスです。

var el = $("#sub-services"); 
var position = el.position(); 

function init() { 
    window.addEventListener('scroll', function (e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header"); 
     if (distanceY > position.top) { 
      header.setAttribute("class", "smaller"); 
     } else { 
      header.removeAttribute("class"); 
     } 
    }); 
} 
window.onload = init();

jQueryを使ってそれを行う方がはるかに簡単です：

は、ここで私は自分のサイトで使用している完全なコードです。正しい方向に私を向けるための@carambaに感謝します。

出典

2016-04-04 11:25:06 hermitspike

ありがとうございました。 – hermitspike

あなたのコメントは有用であり、 "CSSメディアの問い合わせ"ではありません。正直なところ、嫌悪感を抱かせようとはしません。そして私はコメントをupvoteできません。：/ +私は私の答えを受け入れるために2日待たなければならない。 – hermitspike

は、混乱を避けるためにページ

答えて

関連する問題