4

サイドバーの位置を絶対位置から固定位置に変更しようとしています。サイドバーはフッターに触れるまで絶対になり、その後固定されるという考え方です。したがって、コードベローズは私の大きなモニターでは正常に機能しますが、私の小さなモニターでは、サイドバーがフッターに当たる前に固定されます。大きなモニターでは、サイドバーがフッターにぶつかり、コードベローズはトリガーされないと思います。

$(document).scroll(function() {
    if ($(this).scrollTop() < 5953) {
        $('.hanger').addClass(' hanger sidebar');
        $('.xoxo').removeClass('xoxo2 ')
        $('.xoxo').css("position", "fixed");
    }
})

5953では、数値を動的に取得する方法はありますか？私は試しました： var value = $('#footer').scrollTop()そしてvar value =$('#footer').offset().topそしてvalue、固定数の代わりに変数を渡します

これがデモですhttp://aurelslab.co.uk/-モニターが大きいか小さい場合、サイドバーが正常に機能しないことがわかります。

ありがとう

4

2 に答える 2

3

これ、あなたが探しているものですか？

var value           = $(window).height() + $(window).scrollTop(); 
var elementTop      = $('#pagefooter').offset().top;

if( value >= elementTop ) {
    $('.hanger').removeClass('sidebar');
    $('.xoxo').addClass('xoxo xoxo2')
    $('.xoxo').css("position","absolute");  
}
else if( value < elementTop ) {
    $('.hanger').addClass(' hanger sidebar');
    $('.xoxo').removeClass('xoxo2 ')
    $('.xoxo').css("position","fixed");  
}

ローカルでテストしましたが、ウィンドウのサイズに関係なく機能するようです。基本的に、フッターがまだビューポートに移動したかどうかを確認するために、ウィンドウサイズをスクロールトップに追加します。

2ノート

（iOSのように）モバイルデバイスでスクロールする場合、すべての勢いが終了したときにスクロールイベントが発生します。そのため、デスクトップで見られるようなスムーズな動きは見られません。

そして、あなたのフッターのIDはではありませfooterんpagefooter。:)

于 2012-07-15T18:07:34.610 に答える
0

フッター要素にアクセスするには、要素IDまたは要素のいずれかを使用できます。

例：

  • フッター要素にアクセスするには：$('footer')
  • フッターIDにアクセスするには：$('#pagefooter')

これを行うだけで、現在のフッターの位置を見つけることができます。

var currentPosition = $('footer').position().top - $(window).height();

私はあなたを説明するために大まかなライブデモを用意しました。

于 2012-07-15T18:45:12.710 に答える