Javascript Jquery滚动条隐藏菜单中的元素
我不希望我的li列表在新菜单出现时消失。修复!我只想让他们按照固定的菜单下来!我该如何解决这个问题?以下是jquery:Javascript Jquery滚动条隐藏菜单中的元素,javascript,jquery,html,css,scrollbar,Javascript,Jquery,Html,Css,Scrollbar,我不希望我的li列表在新菜单出现时消失。修复!我只想让他们按照固定的菜单下来!我该如何解决这个问题?以下是jquery: var menuTop = $('.menu').offset().top; var menuClone = $('.menu').clone().addClass('fixed'); $(window).bind('scroll', function() { var scrollY = window.pageYOffset; if(scrollY > menuT
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>
可能您不需要克隆菜单。您只需切换菜单元素的固定类: 同样 CSS: JS:
.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;
}
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);
}
});