の位置が固定されているときにスクロールバーの上にオーバーラップするヘッダ

私は以下のhtml構造を持っていて、うまくいっているようだが、position:fixedのCSSを画面右側のスクロールバーにオーバーラップさせてz-index:-1ここでの位置が固定されているときにスクロールバーの上にオーバーラップするヘッダ

はJSFiddle demo

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; 
 
}

<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>

です：誰かがこれを処理する方法を提案してくださいすることができ、この場合には、ヘッダーのリンクは、クリックできません

UPDATEあなただけのposition absoluteないposition fixedが必要

出典

2016-10-27 Sanjeev Kumar

を見つけてみてください？あなたはどんなブラウザ/ OSですか？ – Chris

JSfiddleデモが表示され、ヘッダーがスクロールバーに表示され、そのためにスクロールバーが上部に隠れています。 –

私はその問題を抱えていないので、なぜあなたがどのブラウザ/ OSを使用しているのか知りたいのですが。 – Chris

あなたは、スクロールバーの幅のサイズを計算するためにjQueryを使ってそれを作ることができます。

あなたはスクロールバーを重ねているヘッダとはどういう意味ですか

$("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); 
 
};

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; 
 
}

<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>

機能がhere

出典

2016-10-27 09:57:39

ありがとう、期待通りにうまくいっています！ –

-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; 
}

出典

2016-10-27 09:46:34 Valarmathi

彼はフルページで特定の 'div 'にないスクロールバーを必要としています –

次にヘッダーに「位置：固定」とコメントしてください。 – Valarmathi

下の画像に問題を参照してください。

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; 
 
}

<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>

出典

2016-10-27 09:50:25

答えてくれてありがとう、もともと、ヘッダーは常に表示され、他のものは上/下にスクロールするので、固定されていました。 –

それが可能かどうか分かりません。しかし、あなたがコードを表示する方法は 'スクロール'は 'スクロール'が 'ページ'ではなくスクロールしているものです。 –

@Pによって提案されたこのことについてのご意見ありがとうございます。フランクは処理するのに十分良いです –

の位置が固定されているときにスクロールバーの上にオーバーラップするヘッダ

答えて

関連する問題