0

コードをハッキングする前に、これが可能かどうかを知りたいだけです。

上部に固定ナビゲーションを備えた Twitter ブートストラップ上に構築されたサイトがあります。

ナビゲーションには、高さと幅の .css プロパティ セットと、ナビゲーション バー自体に 155 ピクセルのマージンが設定された画像があり、大きな固定ナビゲーションを補うために 180 ピクセルのボディ パディングがあります。これにカルーセル (ブートストラップ機能) が続きます。

問題は、ユーザーがカルーセルをスクロールするときに 3 つの div の 3 つの css プロパティを変更することで、そのナビゲーションのサイズを変更できるかどうかです。ユーザーがカルーセルをスクロールしたら、ナビゲーションを 180 ピクセルから 30 ピクセルに下げて、ページの上部に固定したままにしたいと思います。ページのスペースを少なくするためです。キッカーは、レスポンシブ サイズを使用しているため、幅 979 ピクセルを超えるデバイスで表示しているユーザーにのみ影響します。どんな助けでも大歓迎です。

4

3 に答える 3

2

スクロール機能が必要です

これは、それに応じてメニューとスタイル要素にクラスを実装するデモです http://jsfiddle.net/hus​​hme /3T6LT/2/

$(window).scroll(function () {
var sc = $(window).scrollTop()
if (sc > 50) {
    $("#menu").addClass('small')
} else {
     $("#menu").removeClass('small')
}

});

于 2013-07-22T00:19:36.547 に答える
1

これからアイデアを得ることができます（私は数日前に記事としてここに書きました）

(function( $ ){
    $.fn.stickyMenu = function( options ) {
        var $this = this,
        defaults = {
            'left' : 0,
            'top' : 0,
            'menu_offset_top' : $this.offset().top
        },
        settings = $.extend({}, defaults, options);
        $(window).on('scroll.stickyMenu', function(){
            if ($(window).scrollTop() > settings.menu_offset_top)
            {
                $this.css({
                    'position': 'fixed',
                    'top':settings.left,
                    'left':settings.top,
                    'zIndex':9999
                });
            }
            else
            {
                $this.css({
                    'position': 'relative',
                });
            }
        });
        return $this;
    };
})(jQuery);
于 2013-07-22T00:21:42.807 に答える