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');
    }
}

（这不是我的解决方案，我是从这个网站上获取的：http: //www.widget-101.com/web/tips-web/como-hacer-un-menu-pegajoso-con-css-y-jquery-粘性菜单/ )

Answer 2

你可以在 jQuery 中做这样的事情。您可以使用 $(window).scrollTop() 从顶部获取以 px 为单位的位置，然后如果有人向下滚动超过 200px，则将 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.
        }
    });
});