Javasciptを使用せずに訪問者がスクロールしたときに縮小するページ上部のナビゲーションバーを取得するにはどうすればよいですか？Javascriptを使用せずにスクロールするときにナビゲーションバーを縮める
たとえば、hereが実行されます。そのサイトと同じように継続的に収縮するのではなく、離散的に幅を狭くすることもできます。 CSSは方法がないよう
は（私は、具体的Javascriptを使用せずに行われる。このために求めていますので、私は、これは、重複していない。）
あなたが求めている何を、残念ながら完全に不可能JavaScriptをなしていますユーザーがいつページをスクロールするかを知ることができます。
しかし、純粋なCSSで（ほぼ同じものである）カーソル位置に基づいてヘッダを圧縮することが可能あります。リスター氏によるthis answerを参照してください。
希望すると便利です。
私は、この本はあなたに
/*Strip the ul of padding and list styling*/
ul {
\t list-style-type:none;
\t margin:0;
\t padding:0;
\t position: absolute;
}
/*Create a horizontal list with spacing*/
li {
\t display:inline-block;
\t float: left;
\t margin-right: 1px;
}
/*Style for menu links*/
li a {
\t display:block;
\t min-width:140px;
\t height: 50px;
\t text-align: center;
\t line-height: 50px;
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
\t color: #fff;
\t background: #2f3036;
\t text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
\t background: #19c589;
}
/*Make dropdown links vertical*/
li ul li {
\t display: block;
\t float: none;
}
/*Prevent text wrapping*/
/*Style 'show menu' label button and hide it by default*/
.show-menu {
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
\t text-decoration: none;
\t color: #fff;
\t background: #19c589;
\t text-align: center;
\t padding: 10px 0;
\t display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
\t /*Make dropdown links appear inline*/
\t ul {
\t \t position: static;
\t \t display: none;
\t }
\t /*Create vertical spacing*/
\t li {
\t \t margin-bottom: 1px;
\t }
\t /*Make all menu links full width*/
\t ul li, li a {
\t \t width: 100%;
\t }
\t /*Display 'show menu' link*/
\t .show-menu {
\t \t display:block;
\t }
}\t <label for="show-menu" class="show-menu">Show Menu</label>
\t <input type="checkbox" id="show-menu" role="button">
\t \t <ul id="menu">
\t \t <li><a href="#">Home</a></li>
\t \t <li><a href="#">About</a></li>
\t \t <li><a href="#">Portfolio </a></li>
\t \t <li><a href="#">News</a></li>
\t \t <li><a href="#">Contact</a></li>
\t </nav>