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

Jquery scrollbar hides elements in menu

本文关键字：元素 隐藏菜单 滚动条 Jquery      更新时间：2023-09-26

当新菜单（menu.fixed）出现时，我不希望我的li列表消失！我只想让他们按照固定菜单往下看！我该怎么解决这个问题？这是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>

也许您不需要克隆菜单。您只需要为菜单元素切换类"fixed"：

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

这是一个演示

相关文章：