1

Railsアプリがあります。以下を含むビューがあります。

<nav class="navigation" id="navigation">
  <ul>
    <li><a href="#info">Info</a></li>
    <li><a href="#address">Address</a></li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#">Website</a></li>
  </ul>
</nav>

私の app/assets/javascript フォルダーにある custom.js ファイルには、以下が含まれています。

var mediaTop = $('div#navigation').offset();
var media = $('div#navigation');
console.log(mediaTop);

$(document).scroll( function() {
   var scrollTop = $(document).scrollTop();


   //fix/unfix as necessary
   if (mediaTop < scrollTop) {
       $(media).addClass('fixed'); 
   }
   else { 
       $(media).removeClass('fixed'); 
   }
});

ただし、コンソール行は未定義で出力されます。jQueryコードは、下にスクロールするとナビゲーションバーをページの上部にロックするはずで、上端がページの上部に当たります。

4

2 に答える 2

3

ただし、コンソール行は未定義で出力されます。

それは驚くべきことだと思います。offsetを返す状況を認識していませんundefined。nullはい、そうではありませんundefined。

2 つの主な事柄:

まず、console.log行に が表示nullされている場合は、#navigation要素がまだ存在していないためです。スクリプトを HTML の要素の下に移動するか、jQuery の を使用して、要素が存在するまでコードが実行されないようにしますready。

ドキュメントundefinedにあるように、要素が隠されている場合に使用される可能性があります

jQuery は、非表示の要素のオフセット座標の取得、または body 要素に設定された境界線、余白、またはパディングの説明をサポートしていません。

visibility:hiddensetで要素の座標を取得することは可能ですがdisplay:none、 はレンダリング ツリーから除外されるため、位置が定義されていません。

(しかし、私の実験では、 を取得するのでdisplay: noneはなく、を使用しても位置が得られましたundefined。)

次に、とoffsetの 2 つのプロパティを持つオブジェクトを返します。あなたがしたい。lefttoptop

また、要素を 2 回検索する必要はありません。最初の 2 つのステートメントの順序を逆にするだけです。

すべてをまとめると：

// Make sure this is run *after* the element exists, and make sure it's not hidden
var media = $('div#navigation');
var mediaTop = media.offset().top;

外部スクリプト ファイルを使用する方法を以下に尋ねました。呼び出しをコールバックにready入れるだけです。ready

$(document).ready(function() {
    // Your code here
});

またはショートカット

$(function() {
    // Your code here
});

ただし、タグの場所を制御しない場合にのみ、これを行う必要がありますscript(たとえば、ライブラリなどを作成している場合)。制御する場合は、ドキュメントの最後、終了タグの直前にタグを配置scriptします。</body>

<!-- ...page content... -->
<script src="myfile.js"></script>
</body>
</html>
于 2013-09-23T04:18:13.117 に答える
-1

交換

var mediaTop = $('div#navigation').offset();

と

var mediaTop = $('div#navigation').offset().top;

公式文書

于 2013-09-23T04:16:26.537 に答える