1

スティッキーヘッダーと呼ばれるかどうかはわかりませんが、これは皆さんにとって簡単な質問かもしれません! 私はスティッキーヘッダーを持っています.. JSFIDDLE here

JS コード:

jQuery(function($) {
$(window).on("scroll", function () {
if ($(this).scrollTop() > 100) {
    $("#header").css({position: 'fixed'});
}
else {
    $("#header").css({position: 'inherit'});
}
})
});

CSS:

#header { background: #000; color: #fff; padding: 20px; margin: 0; }
#test { height: 2000px; }

主な質問: このスクリプトを上記の画面 780 でのみ実行したいと考えています。タブレット版やモバイル版には入れたくない.. ヘルプ

オプション: jsfiddle を実行して、私のコードを提案/即興で作成できますか? クールな効果、トランジションなどを追加するようなもの..

前もって感謝します！

編集** これが別の質問になるかどうかはわかりません..

コードを更新してこれを置き換えました

if ($(this).scrollTop() > 100) {

の中へ

if ($(this).scrollTop() > 100 && $(this).width() > 780) {

ある意味では、それは機能します..しかし、小さいバージョンのcssのプロパティを返しません..それをうまく説明するために、更新されたjsfiddleがあります。

  1. 780 以上の場合、下にスクロールするとヘッダーが赤くなり、上にスクロールすると再び黒になります (私が望んでいたように)

  2. ウィンドウのサイズを 780 未満に変更すると、ヘッダーはグレーになります。上下にスクロールした場合（位置は固定されていない継承する必要があります）。色はまだ灰色である必要があります

私のjsfiddleケースでは、黒くなります..

4

3 に答える 3

1

jqueryでウィンドウの高さを取得できます

if($(window).width() >= 780){
  alert("bigger")
}
于 2013-11-14T03:16:54.867 に答える