2

全て。動的に配置された div に浮かぶ、垂直に固定されたナビゲーション メニューを作成しようとしています。ページのコンテンツと重ならないように div を水平方向にスクロールしますが、常に表示されるように垂直方向に固定する必要があります。私はまだ jquery に慣れていません。限られた知識で達成できたことを非常に誇りに思っていますが、実装しようとしているコードの一部に問題がありました。

4つの関数を作成しました。ナビゲーション div の位置を定義するもの (getVar)、div の現在の位置を取得し、CSS を操作してページ コンテンツと共に水平方向にスクロールできるようにするもの (scrollWith)、ウィンドウが開いているときに 2 番目の関数を呼び出すものscrolled(scrollStart)、最後に、ウィンドウのサイズが変更されたときに div の位置を再定義する関数です。

ロード時に div の位置が正しく計算されます。ウィンドウのサイズが変更された後でも正しく再計算されますが、ウィンドウがスクロールされていない場合に限ります。ウィンドウがスクロールされると、更新された位置変数が CSS 位置を計算する関数に渡されないようです。

ロード時とウィンドウのサイズ変更後の関数が 2 つしかない場合に、これを作成しようとしました。これら 2 つの機能は実質的に同一でしたが、期待どおりには機能しませんでした。また、ウィンドウのサイズが変更されたときにスクロール イベントのバインドを解除し、変数が再計算された後に scrollStart 関数を呼び出す scrollStop 関数を作成しようとしましたが、期待どおりに変数が更新されなかったようです。私が求めている効果を達成するためのはるかに簡単な方法があるかもしれません。

このためのフィドルも作成しました。http://jsfiddle.net/ED3gD/

ここに私のjqueryがあります

$(document).ready(function() {
    getVar();
    scrollStart();
});

$(window).resize((function() {
    var timeout = null;
    return function() {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(getVar, 250);
    };
})());

function getVar() {
    var p = $(".navigation");
    position = p.offset();
}

function scrollWith() {
    $win = $(window);
    $('.navigation').css('left', position.left - $win.scrollLeft());
}

function scrollStart() {
    $(window).scroll(scrollWith);
}

ここに私のHTMLがあります

<div class="wrapper">
    <div class="navigation">
        <div class="menu">
            navigation
        </div>
    </div>
    <div class="content">content</div>
    wrapper
</div>

ここに私のCSSがあります

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    float: left;
    position:fixed;
    width:100px;
    background-color:yellow;
}


.content {
    position:absolute;
    left:100px;
    top:0px;
    margin:0;
    padding:0;
    width:100px;
    height:1400px;
    background-color:blue;
}
4

1 に答える 1

0

私はまだ私の元のjqueryが機能しない理由を完全には理解しておらず、誰かに説明を提供してもらうか、いくつかの良いリソースを教えてもらいたいと思っています。その間に、私はこの問題を回避する2つの方法を見つけました。これは、将来誰かに役立つかもしれないと思いました。

最初の回避策

最初の回避策は、divを比較的配置し、scrollTop値に依存してdivのCSSトップ位置値を操作して、固定位置を模倣することです。ナビゲーションメニューがスクロール中に非常にぎくしゃくした方法で移動したので、私はこの方法が特に好きではありませんでした。

これが私のjqueryです

 $(document).ready (function() {
    $(window).scroll(function(){
    $('.navigation').css('top',0+ $(window).scrollTop());
      });
      });

これが私のHTMLです

<div class="wrapper">
            <div class="navigation">
             navigation
            </div>
            <div class="content">
             content
            </div>
 wrapper
</div>

これが私のCSSです

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    float:left;
    position:relative;
    width:100px;
    background-color:yellow;
}    

.content {
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
    height:1400px;
    background-color:blue;
}

2番目の回避策

この次の回避策は、元のjqueryと非常によく似ています。違いは、ナビゲーションdivの幅を100％にして、動的に内部に配置されたメニューdivを含めるために使用したことです。このように、jqueryはナビゲーションdiv位置をまったく計算する必要がなく、これにより、位置変数の問題を完全に回避することができます。

これが私のjqueryです

$(document).ready (function() {
$(window).scroll(function(){
$('.navigation').css('left', 0 - $(window).scrollLeft());
  });
  });

これが私のHTMLです

<div class="navigation"> 
          <div class="menu">
           menu
        </div>
            navigation
    </div>

    <div class="wrapper">
        <div class="content">content</div>
    wrapper
</div>

これが私のCSSです

.wrapper {
    position:relative;
    margin:0 auto;
    background-color:red;
    width:200px;
}

.navigation {
    position: fixed;
    width:100%;
    min-width:200px; 
    background-color:transparent;
}    

.menu {
    position: relative;
    width:100px;
    margin:0 auto; 
    left: -50px;
    z-index: 10;
    background-color:yellow;
}

.content {
    position:absolute;
    left:100px;
    top:0px;
    width:100px;
    height:1400px;
    background-color:blue;
}

[注：この回答の投稿時にjsfiddle.netはダウンしていました]

于 2011-04-22T19:13:45.987 に答える