10

私はブートストラップのコア管理構造内で作業しており、ページの上部にメイン ヘッダーがあり、その下にサブ ヘッダーがあります。ユーザーが下にスクロールしたときにそのサブヘッダーをページの上部に固定して、常にその情報を表示できるようにしようとしていますが、少し問題があります。

一番上に貼りたい部分はこんな感じ。

<div class="area-top clearfix" >
  <div class="pull-left header">
    <h3 class="title"><i class="icon-group"></i>Dashbord</h3>
  </div><!--.header-->
  <ul class="inline pull-right sparkline-box">
    <li class="sparkline-row">
      <h4 class="blue"><span> Cover Designs</span> 4</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="green"><span> Video Trailers</span> 5</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="purple"><span> Web Banners</span> 5</h5>
    </li>
  </ul>
</div><!--.area-top-->

navbar navbar-fixed-topこれまでのところ、クラスを使用して別の div でラップしようとしました。しかし、それはすぐにそれをトップに押し上げ、見なければならないコンテンツをオーバーラップさせました.

また、現在の div に追加してプレーンな css を使用しようとしposition:fixed;ましたが、その下にあるブレッドクラムがフローから外れるため、台無しになります。

CSSだけでこれを達成する方法はありますか？jquery でハックできることはわかっていますが、私のチームでは CSS のみを担当しています。

4

3 に答える 3

0

私の見解は次のとおりです。あなたがこれを求めるとき：

to fix to the top of the page when the user scrolls down

これは、ユーザーがスクロールしていることを検出する必要があることを意味します。さらに、この種のアクションを検出するには、js / jQuery 以外に方法がありません。CSS は、たとえばメニューを固定するクラスを作成することでソリューションの一部にすることができますが、クラスを配置および削除するタイミングを検出するには、常に少しの js が必要です。

jQuery でこれを行う方法の例を次に示します。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
    $(window).scroll(function(){
        var offset = $('.area-top').offset().top;
        var top = $(document).scrollTop();
        if(top >= offset){
            // this is where you should fix you menu
            $('.area-top').addClass('fixed'); // if you have a css class which fix the element.
            $('.area-top').css('position', 'fixed'); // if you don't have css class
        }else{
            // this is where you should unfix your menu
            $('.area-top').removeClass('fixed'); // if you have a css class which fix the element.
            $('.area-top').css('position', 'inherit'); // if you don't have css class
        }
    });
</script>

DOM の変更を検出する必要がある、またはユーザーの操作が必要なすべての「高度な」アクションには、それに対処するために何らかの JS または PHP が必要になることを忘れないでください。「高度な」とは、HTML でネイティブに処理できないすべてのものを意味しています。

于 2018-03-16T06:24:28.207 に答える