固定要素の幅の変更

Question

固定要素のスクロール時に固定クラスが追加されると、サイドバーのナビゲーションによって幅が変更されます。画面の幅に応じて、大きく変化します。

http://festiva.com/fac.php

<div class="col-sm-4 nav_cnt"> 
    <ul class="nav"> 
     <li><a href="destinations2.php">Overview </a></li> 
     <li><a class="current"href="fac.php">Festiva Adventure Club <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a></li> 
     <li><a href="#">Festiva Weeks</a></li> 
     <li><a href="#">Festiva Exchange Partners</a></li> 
     <li><a href="#">Voyages by RTX</a></li> 
     <li><a href="#">Festiva Sailing Vacations</a></li> 
     </ul> 
    </div> 

@media handheld, only screen and (min-width: 767px) { 
    .nav_cnt{ 
     position: relative; 
    } 
    .fixed{ 
     margin-bottom: 50px; 
     position:fixed; 
     top:50px; 
     width: inherit; 
     width: 25%; 
    } 
} 

$(window).bind('scroll', function() { 
     if($(window).scrollTop() >= $('.nav_cnt').offset().top - 50) { 
      $('.nav_cnt').find('.nav').addClass('fixed'); 
     }else{ 
      $('.nav_cnt').find('.nav').removeClass('fixed'); 
     } 
    }); 

Answer 1

私はこのサイドバーのナビゲーションのための良い幅を見つけて、モバイルまで、それを明示的に設定された幅を与えるだろう。これにより、一貫性を保ち、幅をまったく変更しないことがわかります。 280pxは私がテストしていたので私にとってはよかったと思っていました。代わりにをcol-xs-12 col-sm-4 col-md-3 col-lg-3に設定しました。そのため、コンテンツはそのサイドバーのナビに近づくようになりました。それを試してみて、それが好きかどうか見てみましょう。

Answer 2

main.cssでこれを検索し、変更してみてください。

@media handheld, only screen and (min-width: 767px) { 
    .nav_cnt{ 
     position: relative; 

    } 
    .fixed{ 
     margin-bottom: 50px; 
     position:fixed; 
     top:50px; 
     width:26.65%; 
    } 
}