2

私が直面しているものに関連するここにあるすべてのものを調べましたが、まだ修正できません.

私がやろうとしていること:

  1. ユーザーがページを上下にスクロールすると、サイドバー ナビゲーションがフロートします。
  2. すべての要素を表示してクリックできるように、サイドバーを中央で停止させる。

私が得ているもの：

  1. サイドバーは下にスクロールすると問題なくスクロールしますが (集中ビュー)、上にスクロールすると、ページのスクロールが速すぎるとサイドバーの半分しか表示されません。
  2. ページを下にスクロールすると、サイドバーによってフッターがさらに下に押し出されます。
  3. ページを下から上にスクロールしても、サイドバーは元の位置にロックされません。少し隙間があるようです。

デモリンク

これがスクリプトです（寛大なJordon Mearsから改造されたものです）：

<script type="text/javascript">
function animate_box() {  
var offset = -15; /* set this to the starting margin-top in the css */  
var element = document.getElementById('animate_box'); 

if(element) {  
    var top = Number(String(element.style.marginTop).substring(0,String(element.style.marginTop).indexOf('px')));

    try {  
        if(document.body.scrollTop > 500) {  
            var difference = (document.body.scrollTop + offset);
        } else if(document.documentElement.scrollTop > 0) {  
            var difference = (document.documentElement.scrollTop + offset);

        } else {  
            var difference = offset;  
        }  
    } catch(e) {  
        var difference = offset;  
    }  

    difference = difference - top;  

    if(difference > 200) {  
        element.style.marginTop = (top + Math.abs(Math.ceil(difference / 30))) + 'px';  
    } else if(difference < 190) {  
        element.style.marginTop = (top - Math.abs(Math.ceil(difference / 30))) + 'px';  
    }  
}  
}  
window.setInterval(animate_box, 50);
</script>
4

1 に答える 1

0

別のアプローチをお勧めします。

  • 要素の開始位置を保存します (.offset().top)
  • スクロールが発生したとき:
  • ウィンドウのスクロール オフセット (.scrollTop()) が開始位置よりも大きい場合は、サイドバーの位置を「上: 0」で「固定」に変更します。
  • 開始位置を下回った場合は、静的 (デフォルト位置) に戻します。

このようなもの：

$(function() {
    var backup_position_toolbar = $('#sidebar').offset().top;
    $(window).scroll(function() {
        if ( $('#sidebar').offset().top - $(window).scrollTop() &lt; 0) $('#sidebar').addClass('fixed');
        if ( $(window).scrollTop() &lt; backup_position_toolbar ) $('#sidebar').removeClass('fixed');
    });
});

次のように定義された「固定」クラスを使用していることに注意してください。上: 0; }

これにより、メニューがより使いやすくなります。特定の時点でサイドバーをブロックしたい場合は、もう少しロジックを追加できます (つまり、下部が近すぎる場合)。この方法では、数値 (500、200 など) を設定する必要はありません。

ただし、努力せずにもっと何かが必要な場合は、「接辞」でブートストラップを試してください（左のメニューを見てください。必要なものです） http://twitter.github.com/bootstrap/javascript.html#affix

于 2012-11-12T09:38:35.877 に答える