尝试将导航固定到屏幕顶部,但仅限于屏幕 widths > 782px
到目前为止,我已经有一半的脚本运行良好:https://jsfiddle.net/ah4ta7xc/1/
但是,当应用类 sticky-menu
时,我的方法在顶部留下了不需要的空白。
HTML:
<div id="foo">Logo and stuff</div>
<div id="main-menu">Site menu</div>
CSS:
body {
height: 3000px;
}
#foo {
height: 50px;
background-color: #ccc;
}
#main-menu {
width: 100%;
height: 30;
background-color: black;
color: white;
text-align: center;
padding: 10px;
}
.sticky-menu {
z-index: 10;
width: 100%;
position: fixed;
}
jQuery:
$(function(){
if ($(window).width() > 782) {
$('#main-menu').addClass('sticky-menu');
}
$(window).resize(function () {
if ($(window).width() > 782) {
$('#main-menu').addClass('sticky-menu');
}
else {
$('#main-menu').removeClass('sticky-menu');
}
});
});
最佳答案
您可以将这些行添加到正文的 CSS 中:
margin: 0;
padding: 0;
关于jquery - 仅在桌面上将导航固定到顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29306970/