トップ後のスペースを維持する

Question

私はスクロールダウン時にメニューが固定される関数を作成しました。

そうなると、see in my demo fiddleのようにすべてのテキストが代わりに固定バーの後ろに来るので、それには多くのスペースが必要です。

固定された.topと、.contentの間にもう少し余裕を持てる方法はありますか？

編集：すべてのあなたの答えに感謝します。私がマルコースのものを選んだのは、彼が最初だったからですが、他の人たちも同様に働いています。

Answer 1

topが修正された場合、コンテンツのpadding-topで遊ぶ必要があります。だから、全体の解決策は以下のとおりです。

.top.fixed + .content { 
    padding-top: 155px; 
} 

編集したフィドル：

https://jsfiddle.net/h65x3hyb/2/

Answer 2

それにスクリプトを適用してください。

$(function() 
{ 
    $top = $('.top'); 

    $(window).on('scroll', function() 
    { 
    if ($(window).scrollTop() > 75) 
    { 
     $top.addClass('fixed'); 
     $('.content').css('padding-top:','196px'); 
    } 
    else 
    { 
     $top.removeClass('fixed'); 
     $('.content').css('padding-top:','0'); 
    } 
    }); 
}); 

Answer 3

あなただけのようにも.contentにクラスを追加することができます。

$(function() { 
 
    var $top = $('.top'), 
 
    $content = $('.content'); 
 

 
    $(window).on('scroll', function() { 
 
    if ($(window).scrollTop() > 75) { 
 
     $top.addClass('fixed'); 
 
     $content.addClass('margin'); 
 
    } else { 
 
     $top.removeClass('fixed'); 
 
     $content.removeClass('margin'); 
 
    } 
 
    }); 
 
});

.top { 
 
    top: 0; 
 
    height: 180px; 
 
    width: 100%; 
 
    background-color: red; 
 
    box-sizing: border-box; 
 
} 
 
.top.fixed { 
 
    height: 75px; 
 
    position: fixed; 
 
    -webkit-transition: height 0.5s; 
 
    transition: height 0.5s; 
 
} 
 
.content { 
 
    height: 900px; 
 
    background-color: green; 
 
} 
 
.content.margin { 
 
    margin-top: 180px; 
 
    /*height of top*/ 
 
} 
 
p { 
 
    margin-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="top"> 
 

 
</div> 
 
<div class="content"> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum 
 
    </p> 
 
</div>

Answer 4

はjqueryを使用してコンテンツにあなたのpタグとmarginにパディングを追加し、これを試してみてください。

$(function() 
{ 
    $top = $('.top'); 

    $(window).on('scroll', function() 
    { 
    if ($(window).scrollTop() > 75) 
    { 
     $top.addClass('fixed'); 
     $(".content").css("marginTop","152px"); 
    } 
    else 
    { 
     $top.removeClass('fixed'); 
     $(".content").css("marginTop","0px"); 
    } 
    }); 
}); 

p 
{ 
    margin: 0; 
    padding-top:20px; 
}