Html 修正了从左向右滚动页面时最小宽度影响内容的位置_Html_Css_Position

Html 修正了从左向右滚动页面时最小宽度影响内容的位置

html css

Html 修正了从左向右滚动页面时最小宽度影响内容的位置,html,css,position,Html,Css,Position,我的HTML中有一个标题，必须将其固定在页面顶部。这工作正常，没有问题： header,footer{ position:fixed; } 但是我想设置最小宽度，所以宽度不能太小。我尝试使用最小宽度，这是可行的。当窗口到达该位置时，我的标题中的内容保持不变。但当页面从左向右滚动时，内容永远不会移动。它不在页面的侧面 header,footer{ position:fixed; min-width:800px; width:100%; background

我的HTML中有一个标题，必须将其固定在页面顶部。这工作正常，没有问题：

header,footer{
    position:fixed;
}

但是我想设置最小宽度，所以宽度不能太小。我尝试使用最小宽度，这是可行的。当窗口到达该位置时，我的标题中的内容保持不变。但当页面从左向右滚动时，内容永远不会移动。它不在页面的侧面

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>

但是css会更干净，更少“跳跃”

这就是

fixed

的意思，它是固定的，不会移动。那么可以用jquery来完成吗？当页面滚动时，继续将页首设置为浏览器页首？现在我只能想到一个javascript解决方案，所以是的。这是可能的。虽然可能有一些CSS解决方案。它可以与jquery一起工作，但是CSS会更干净，虽然在CSS中这个世界会更容易。你能链接到你正在谈论的页面吗？仅从代码就很难猜出这个问题

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