:before 伪元素独立于 parent 元素

Question

我有一个与此 user 非常相似的问题，但无法解决我的问题。

我还参考了 Chris Coyier's tutorial 并使用了他的 :before pseudo-element 方法。但是我无法获得 <section> 元素的顶部以反映与 :before child.

相同的顶部

下面是一些示例代码：

HTML

<section id="about">

CSS

#about:before { 
display: block; 
content: " "; 
margin-top: -180px; 
height: 180px; 
visibility: hidden; 
}

这是我正在制作的 the website，您可以实时查看。

我想要这样做的原因是因为我的导航栏是固定的，每当从导航栏单击散列标签链接时，它几乎会切断部分标题。我只想偏移滚动的停止点，以便在标题和导航栏之间添加更多的填充。

提前致谢！！

Answer 1

您的部分元素上的 padding-top 似乎是导致问题的原因。如果您删除填充，它会起作用，但是，您的所有间距都需要固定。

我认为对您来说最简单的事情就是抵消滚动功能...在 agency.js 中第 12 行的 scrollTop: $($anchor.attr('href')).offset().top 之后添加 - 70：

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top -70
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

:before 伪元素独立于 parent 元素

:before pseudo element acting separately from parent element

html

css

pseudo-element