Question

我不希望我的li列表在新菜单（menu.fixed）出现时消失！我只是希望他们按照固定的菜单来做！我该如何解决？这是jquery：

var menuTop = $('.menu').offset().top;
var menuClone = $('.menu').clone().addClass('fixed');

 $(window).bind('scroll', function() {
var scrollY = window.pageYOffset;

if(scrollY > menuTop) {
    if(menuClone.parent().length === 0) {
        menuClone.appendTo($('.menu').parent());

    }
} else if(menuClone.parent().length > 0) {
    menuClone.remove();
}
});

这就是相关的CSS：

.menu {
background-color: white;
width: 80%;
height: 50px;
font-size: 1.5em;
font-family: Roboto; 
margin-bottom:0px;
margin-left:10%;
border-bottom: 2px solid #756B6B;
}
.menu.fixed {
position: fixed;
left: 0;
top: 0;
height: 50px;
width:76.8%;
margin-left: 11.55%;
border-bottom: 2px solid #756B6B ;
}

li {
float: right;
margin-left:40px;
list-style: none;   
position:relative;
padding-bottom: 10px;
}

和html

<div class="menu">
        <ul>
            <li id="sistaord">ovrigt</li>
            <li id="jobberfarenhet">Jobberfarenhet</li>
            <li>Utbildning</li>
        </ul>
</div>

Answer 1

可能你不需要克隆菜单。你只需要切换类＆＃34;固定＆＃34;对于菜单元素：

HTML相同，

CSS：

.menu {
    background-color: white;
    width: 80%;
    height: 50px;
    font-size: 1.5em;
    font-family: Roboto; 
    margin-bottom:0px;
    margin-left:10%;
    padding-bottom: 10px;
    border-bottom: 2px solid #756B6B;
}
.menu.fixed {
    position: fixed;
    left: 0;
    top: 0;
}
li {
    float: right;
    margin-left:40px;
    list-style: none;   
}

JS：

var menu = $('.menu');
var menuTop = menu.offset().top;

 $(window).bind('scroll', function() {
var scrollY = window.pageYOffset;

if (scrollY > menuTop) {
    if (!menu.data('fixed')) {
        menu.addClass('fixed').data('fixed', true);
    }
} else if (menu.data('fixed')) {
    menu.removeClass('fixed').data('fixed', false);
}
});

Here is a demo

Jquery滚动条隐藏菜单中的元素

1 个答案: