css - アンダーメニューはフローティングする必要があります

Question

http://clients.newblack.ro/gtools/をチェックしてください。ユーザーがページを下にスクロールすると、アンダーメニュー（右側にカートアイコン、左側に「Bine ati venit ...」が表示されているメニュー）をフロートさせる必要があります。ページの上部に貼り付けたい。JS でこれを行う方法があることは知っていますが、CSS のみのソリューションをお勧めします。position: fixed; で試しました。そして、それは私が望む場所にとどまりません。要素を調べて回答してください。ありがとう！

Answer 1

必要なものは「付箋メニュー」と呼ばれるものです。これが役立つかどうかを確認してください: http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

この例は、必要なものかもしれません:

http://jsfiddle.net/widgetpc/MRv37/

posicionarMenu();

$(window).scroll(function() {    
    posicionarMenu();
});

function posicionarMenu() {
    var altura_del_header = $('header').outerHeight(true);
    var altura_del_menu = $('nav').outerHeight(true);

    if ($(window).scrollTop() >= altura_del_header){
        $('nav').addClass('fixed');
        $('.content').css('margin-top', (altura_del_menu) + 'px');
    } else {
        $('nav').removeClass('fixed');
        $('.content').css('margin-top', '0');
    }
}

(これは私の解決策ではありません。この Web から取得しました: http://www.widget-101.com/web/tips-web/como-hacer-un-menu-pegajoso-con-css-y-jquery-スティッキーメニュー/ )

Answer 2

jQueryでこのようなことができます。$(window).scrollTop() を使用して上からピクセル単位で位置を取得できます。次に、誰かが 200 ピクセル以上下にスクロールした場合は、ナビゲーション バーに css を追加して固定位置にします。ブラウザのウィンドウ。

$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top add fixed position css to element
        } else {
        // otherwise reset the css.
        }
    });
});