Javascript 根据可见内容部分的比例更改标题部分的位置

我现在的处境是我无法理解的。我有两个，内容部。第一个contentdiv有头和一些隐藏的块内容。 第二个内容分区有4个按钮。单击每个按钮将显示相关的块。块有不同的边缘顶部，这是我的要求

我想要的是头球应该和所有的拦网保持相同的距离比例。 例如，如果按下“块四按钮”，块4内容将显示，标题将向下移动，保持与块1相同的边距

我试过固定姿势，但他的姿势不行

在jquery或js的帮助下，是否可以根据每个块内容更改标题的位置，以保持比例？这对我真的很有帮助。我被这件事难住了。我对jQuery不是很在行，也无法确定是否可以用jQuery实现这一点

HTML

<div class="content">
    <div class="head">Head</div>

    <div class="block" id="blk-1" style="margin-top:10px;">
        Block 1 Content
    </div>
    <div class="block" id="blk-2" style="margin-top:50px;">
        Block 2 Content
    </div>
    <div class="block" id="blk-3" style="margin-top:80px;">
        Block 3 Content
    </div>
    <div class="block" id="blk-4" style="margin-top:120px;">
        Block 4 Content
    </div>
</div>

<div class="content">
    <button type="button" class="blk-1"> Block One </button> 
    <button type="button" class="blk-2"> Block Two </button> 
    <button type="button" class="blk-3"> Block Three </button>
    <button type="button" class="blk-4"> Block Four </button>

</div>

js

$('.blk-1').click(function(){
    $(".block").hide();
    $("#blk-1").fadeIn();
});
$('.blk-2').click(function(){
    $(".block").hide();
    $("#blk-2").fadeIn();
});
$('.blk-3').click(function(){
    $(".block").hide();
    $("#blk-3").fadeIn();
});
$('.blk-4').click(function(){
    $(".block").hide();
    $("#blk-4").fadeIn();
});

这就是你要找的吗

---

我去掉了内联

style

属性并将其放入css中，使.block

div

s的位置基于标题的位置。您可以通过在每个单击事件中添加额外的jquery函数来修改标题的位置。

不清楚您在问什么。您能更好地解释一下第二段吗？听起来您可能想使用waypoints库在向下滚动时粘贴标题？这个图像有用吗@TonySorry我的小提琴没有更新。现在我修正了小提琴的例子。

$('.blk-1').click(function(){
    $(".block").hide();
    $("#blk-1").fadeIn();
});
$('.blk-2').click(function(){
    $(".block").hide();
    $("#blk-2").fadeIn();
});
$('.blk-3').click(function(){
    $(".block").hide();
    $("#blk-3").fadeIn();
});
$('.blk-4').click(function(){
    $(".block").hide();
    $("#blk-4").fadeIn();
});