我有一个响应式设计，当在宽度小于600px的设备上查看时，使用下拉式多级导航。它嵌套在设置为 position: fixed 的标头中。问题是，当您下拉菜单时，菜单会向下溢出并且不会滚动（因为标题是固定的），因此选项卡不可见。有没有办法（使用 Javascript、jQuery 或 PHP）动态设置它，以便在下拉菜单（通过单击右上角或左侧的汉堡菜单图标）时，它将标题的位置从 fixed 更改为relative？
一个很好的例子是 www.dribbble.com。当它小于800px宽时，标题是粘性的（fixed），然后当您单击左上角的菜单时，很明显标题的位置会自动更改为relative。
.HTML
<header role="banner" class="secondary">
<a href="#menu" class="menu-toggle"><em>Menu</em> <span aria-hidden="true"></span></a>
<nav id="nav" role="navigation">
<ul class="menu set">
<li class="subnav">
<a href="#">Link</a>
<ul class="sub-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</nav>
</header>
.CSS
header[role="banner"] {
width: 100%;
background: #fff;
display: block;
margin: 0 auto;
padding: 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
z-index: 10000;
}
@media all and (min-width: 500px) {
header[role="banner"] {
position: fixed;
top: 0;
left: 0;
clear: both;
height: auto;
display: block;
}
}
@media all and (max-width: 499px) {
header[role="banner"] {
position: fixed;
}
}
JavaScript
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#nav'),
$menulink = $('.menu-toggle'),
$menuTrigger = $('.subnav > a');
$menulink.click(function(e) {
e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
var add_toggle_links = function() {
if ($('.menu-toggle').is(":visible")){
if ($(".toggle-link").length > 0){
}
else{
$('.subnav > a').before('<span class="toggle-link">Open</span>');
$('.toggle-link').click(function(e) {
var $this = $(this);
$this.toggleClass('active').siblings('ul').toggleClass('active');
});
}
}
else{
$('.toggle-link').empty();
}
}
add_toggle_links();
$(window).bind("resize", add_toggle_links);
});
好吧
，如果你有一个自定义ID或某种其他类型的选择器属性，那么你可以通过多种方式更改position CSS属性。
CSS3
@media all and (max-width: 800px) {
header[role="banner"] {
position: relative;
}
}
jQuery
$(document).ready(function() {
$('.menu-toggle').click(function() {
if ($( document ).width() < 499)
$('header[role="banner"]').css('position', 'relative');
else
$('header[role="banner"]').css('position', 'fixed');
});
});
注意：您编辑了帖子。您是否意识到您在两个 CSS @media 规则中使用了position: fixed;？将第二个更改为 position: relative; 。