Question

我的HTML中有一个标题必须修复才能保留在页面顶部。这样可以正常运行，没有任何问题：

header,footer{
    position:fixed;
}

但我希望设置最小宽度，因此宽度不能小。我尝试使用min-width工作。当窗口到达时，我的标题内的内容保持原样。但是当页面从左向右滚动时，内容永远不会移动。它停留在页面的旁边。

header,footer{
    position:fixed;
    min-width:800px;
    width:100%;
    background:#000;
    left:0px;
    display:block;
    z-index:10;
}
header{
    top:0px;
    height:100px;
    box-shadow:0px 2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow:0px 2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow:0px 2px 6px rgba(0,0,0,0.5);
    color:#FFF;
}
.login{
    position:absolute;
    right:10px;
    text-align:right;
    text-transform:uppercase;
    top:10px;
    font-size:14px;
}
.logo{
    height:90px;
    width:auto;
    padding:5px;
}
.logo img{
    height:100%;
    width:auto;
}
.body{
    width:100%;
    min-width:800px;
    height:3000px;
    background:red;
}
footer{
    height:30px;
    bottom:0px;
    box-shadow:0px -2px 6px rgba(0,0,0,0.5);
    -moz-box-shadow:0px -2px 6px rgba(0,0,0,0.5);
    -webkit-box-shadow:0px -2px 6px rgba(0,0,0,0.5);
}


<body>
<header>
    <div class="logo"><img src="assests/logo.svg" /></div>

    <div class="login"><a href="#">LOGIN</a> <a href="#">REGISTER</a></div>
</header>
<div class="body"></div>
<footer></footer>
</body>

但是当页眉/页脚被定位时，绝对＆＃39;滚动时我可以看到我的内容。有一个jquery方法可以工作：

$(function(){
    $(window).scroll(function(event){
        $('header').css('top',$(window).scrollTop() + 'px');
    });
});

但是css会更清洁，更少跳跃＆＃39;

当从左到右滚动页面时，具有最小宽度的固定定位会影响内容

0 个答案: