navbarの内容を右に固定

Question

私は現在、私が良い解決策を見つけることができない小さな問題を実行するプロジェクトに取り組んでいます。

だからアイデアは：あなたは固定されているナビゲーションバーがあります。その中をスクロールする必要があります。ボタンをクリックすると、中央のコンテンツがナビゲーションバーの外側の小さな部分で右に移動します。

最初に私は、私はちょうど私のナビゲーションバーに

overflow-y: auto; 

を追加したがapprently、これはすべてのコンテンツを動作し、クリップしないと思いました。

私は自分の問題を示すコードを作成しました。

http://codepen.io/denniswegereef/pen/VjQBXA

Answer 1

あなたがウィンドウに合わせて、高さを設定しようとしているが、あなたはまた、いくつかのパディングを持っているので、それはだように見えます。 box-sizing:border-boxを使用すると、指定した高さにパディングを含めることができます。

var $item = $('.item'), 
 
    $button = $('.button'); 
 

 
for (i = 0; i < 200; i++) { 
 
    $item.append(i + '<br>') 
 
} 
 

 
$button.on("click", function() { 
 
    $item.toggleClass('addMargin'); 
 
});

.sidenav { 
 
    width: 300px; 
 
    background-color: grey; 
 
    position: fixed; 
 
    padding: 20px; 
 
    height: 100vh; 
 
    overflow-y: auto; 
 
    box-sizing: border-box; 
 
} 
 
.addMargin { 
 
    margin-left: 60px; 
 
} 
 
.item { 
 
    transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22); 
 
    width: 100%; 
 
    background-color: orange; 
 
} 
 
body { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="sidenav"> 
 
    <button class="button">test</button> 
 
    <div class="item"> 
 
    </div </div>