Question

结帐http://clients.newblack.ro/gtools/。如果用户向下滚动页面，我需要制作undermenu（右侧包含购物车图标的那个和左侧的“Bine ati venit ...”，位于菜单下方）浮动。我希望它坚持页面的上方。我知道有很多方法可以用JS做这个，但我更喜欢只有CSS的解决方案。我尝试了位置：固定;它不会留在我想要的地方。请检查元素并提供答案。谢谢！

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-sticky-menu/）

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

Undermenu需要漂浮

2 个答案: