Question

我有一个名为lyricpadding的父div，而我内部有很多<h4>个唯一ID。无论如何，通过使用Jquery或Javascript或CSS，我需要做的是将<h4>标记为highlighted的类在父容器的中间，但我不希望它能够覆盖整个事物，我只希望通过自动滚动使文本居中，直到它到达底部。所以具有类highlighted的div将始终可见，最好是在中心。

Answer 1

这是一个jQuery示例。它使用绝对位置，然后根据滚动位置和窗口大小进行调整。见 fiddle 。

HTML：

<div class='lyricpadding'>
    <h4 class='highlighted'>Highlighted</h4>
    <h4>Other</h4>
    <h4>Other</h4>
    <h4>Other</h4>
    <h4>Other</h4>
</div>

CSS：

.lyricpadding
{
    height:1000px;
    width:100%;   
    background-color:lightblue;
}
.highlighted
{    
    display:inline-block;
    position:absolute;
}

jQuery：

function positionMiddle()
{
    var $highlighted = $('.highlighted');    
    $highlighted.css({        
        left: ($(window).width() - $highlighted.outerWidth())/2,
        top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
    });
}

$(window).resize(function(){
   positionMiddle();
});

$(window).scroll(function(){    
   positionMiddle();
});

// To initially run the function:
positionMiddle();

自动滚动以将子元素保持在中心

1 个答案: