0

私は UI デザイン クラスのプロジェクトに取り組んでおり、スクロール時に要素をページの上部に固定するのに助けが必要です。

ここに私がこれまでに持っているものがあります: http://ieatthings.com/opinio/query.html

スクロールすると、検索バーがナビゲーション バーの上に移動し、ユーザーがページの途中で検索できるように適切な位置に収まる必要があります。しかし問題は、検索バーが上がり続けることです!

このチュートリアルの Javascript を使用しました:スクロール時にオブジェクトをブラウザー ウィンドウの上部に固定します。私はあらゆる種類の可能性と組み合わせを試しましたが、残念ながら、このいまいましいことを機能させることはできませんでした.

助言がありますか？

4

1 に答える 1

0

ページがスクロールされた距離と比較して、ページ上の要素 (「myElement」) の位置をテストするには、Javascript を使用する必要があります。ページが要素を超えてスクロールされている場合は、要素の css を変更してページの上部にスナップします。注: モバイル ブラウザは「position: fixed;」を好みません。スタイル プロパティ。

要素に「myElement」の ID を与え、これをタグに挿入します。

<script type="text/javascript"> 

var yPosition; // save original y position of element here

window.onload = function(){ // once entire page is loaded this function is fired
    // save original y position of element before it is scrolled
    yPosition = document.getElementById("myElement").offsetTop;
}

window.onscroll = function(){ // scrolling fires this function      

    var myElement = document.getElementById("myElement"); // for cleaner code

    // compare original y position of element to y position of page
    if( yPosition <= window.pageYOffset ){ 

        // snap element to the top by changing css values of element
        myElement.style.position = "fixed";
        myElement.style.top = "0px"; 

    }else{          

        // re-position to original flow of content
        myElement.style.position = "relative";
        myElement.style.top = ""; // set to default         
    }               
}      
</script>

うまくいけば、これが役に立ちます！

于 2013-04-29T18:55:55.063 に答える