0

ユーザーがページを下にスクロールすると、ウィンドウの上部に粘着性のあるサイドバーが表示されます。

デスクトップサイズでは問題なく動作しますが、画面をタブレットサイズ（@media only screen and（min-width：768px）and（max-width：959px））にサイズ変更すると、固定されなくなります。

Javascriptにメディアクエリを追加する必要がありますか？

あなたはここhttp://v3.edharrisondesign.com/project/でプロジェクトを見ることができます

    $('#sticky').scrollToFixed({
        marginTop: 20,
        limit: function() {
            var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100;
            return limit;
        },
        minWidth: 1000,
        zIndex: 999,
        fixed: function() {  },
    });

    $('#sticky').bind('unfixed', function() {
        console.log('sticky preUnfixed');
    });
    $('#sticky').bind('unfixed', function() {
        console.log('sticky unfixed');
        $(this).css('color', '');
    });
    $('#sticky').bind('fixed', function() {
        console.log('sticky fixed');
        $(this).css('opacity', '1');
    });
});
4

1 に答える 1

0

#stickyでminWidthプロパティを1000に設定しています。これは、ウィンドウ幅が少なくとも1000px幅でなければならないことを意味します。それ以外の場合は、自動的にオフになります。それを削除するか、目的の寸法に合うように十分に小さくすると、機能するはずです。

言い換えれば、これを作ります：

$('#sticky').scrollToFixed({
    marginTop: 20,
    limit: function() {
        var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100;
        return limit;
    },
    minWidth: 768,
    zIndex: 999,
    fixed: function() {  },
});
于 2012-09-04T21:28:30.083 に答える