使用固定位置

时间：2016-10-27 09:22:24

标签： jquery html css scroll

我有以下html结构，似乎一切正常，但当我将header css更新为position:fixed时，它重叠了屏幕右侧的滚动条，我尝试制作{{ 1}}但在这种情况下，标题链接不可点击，有人可以建议如何处理：

这是JSFiddle demo 

z-index:-1
body {
margin: 0;
padding: 0;
}
html, body, .mc_wrapper, .scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller, .scroller-inner {
position: relative;
}
.mc_wrapper {
position: relative;
overflow: hidden;
}
.mc_container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
header {
width: 100%;
height: 100px;
background: #CCC;
position: fixed;
}
header h1 {
color: #ff0000;
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
transform: translate3d(0px, 0px, 0px) !important;
}

更新请参阅下图中的问题

enter image description here

3 个答案:

答案 0 :(得分：2)

您可以使用Jquery来计算滚动条的宽度大小。

请尝试

＆＃13;
＆＃13; 
$("header").width($("header").width() - getScrollBarWidth() + "px") 

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};
＆＃13; 
body {
margin: 0;
padding: 0;
}
html, body, .mc_wrapper, .scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller, .scroller-inner {
position: relative;
}
.mc_wrapper {
position: relative;
overflow: hidden;
}
.mc_container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
header {
  width:100%;
height: 100px;
background: #CCC;
position: fixed;
}
header h1 {
color: #ff0000;
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
transform: translate3d(0px, 0px, 0px) !important;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>
    <div class="scroller">
      <header>
        <h1>this is header</h1>
      </header>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

找到函数here

答案 1 :(得分：0)

您只需要position absolute而不是position fixed。

＆＃13;
＆＃13; 
body {
margin: 0;
padding: 0;
}
html, body, .mc_wrapper, .scroller {
height: 100%;
}
.scroller {
overflow-y: scroll;
}
.scroller, .scroller-inner {
position: relative;
}
.mc_wrapper {
position: relative;
overflow: hidden;
}
.mc_container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
}
header {
width: 100%;
height: 100px;
background: #CCC;
position: absolute;
}
header h1 {
color: #ff0000;
}
.mp-pusher {
position: relative;
left: 0;
height: 100%;
transform: translate3d(0px, 0px, 0px) !important;
}
＆＃13; 
<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>
    <div class="scroller">
      <header>
        <h1>this is header</h1>
      </header>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：-1)

put the div tag before the p tag & css for scroller class give margin-top:100px.

<div class="mc_wrapper">
  <div class="mp-pusher" id="mp-pusher">
    <nav>Side Nav</nav>

      <header>
        <h1>this is header</h1>
      </header>
    <div class="scroller">
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
      <p>this is content lkdzfljljsdf </p>
    </div>
  </div>
</div>


.scroller {
    overflow-y: scroll;
  margin-top: 100px;
}
相关问题
最新问题