Question

我有一个标题，我将h1和h2标题置于顶部。问题是标题滚动滚动条当然是正常的但我想在标题上的所有标题滚动时在某个时刻修复它。在这一点上，我希望标题停止并保持固定。

我已经尝试了固定的位置，但当然它也固定了标题，这正是我不想要的。

我也试过这个JavaScript，但没有运气。

的JavaScript

$(window).scroll(function() {
    var _height = 120 - (120 * $(this).scrollTop() / $('body').height());

    if (_height >= 80) {
        $('.header_container').height(_height);
    }
});

这里分别是我的HTML和CSS代码。

HTML

<div class="header_container" id="header_container">
    <div id="header_titles">
        <h1 class="homepage-heading">Browse</h1>
        <h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
    </div>
</div>

CSS

#header_container {
    background-color: black;
    width: 100%;
    height: 120px;
    top: 0;
    left: 0;
    right: 0;
}
#header_titles {
    position: absolute;
    width: 100%;
    font-size: 35px;
    text-align: center;
    padding-top: 10px;
}

Answer 1

所以你想要一个粘性标题？

在您的javascript中创建代码：

MQDataException.log = null;

这会在标题中添加var $header_container = $('#header_container'); var header_height = $header_container.outerHeight(true); if($(window).scrollTop() < header_height){ $header_container.removeClass('sticky'); } else{ $header_container.addClass('sticky'); } $(window).on('scroll', function(){ if($(window).scrollTop()< header_height){ $header_container.removeClass('sticky'); } else{ $header_container.addClass('sticky'); } });类，然后您可以设置要修复的标题：

sticky

这应该这样做。滚动浏览标题的高度时，您将获得“粘性”标题。如果没有，你将删除粘性类......

Answer 2

所以，让我看看我是否得到这个...你希望你的标题与页面正常滚动，直到某个点被修复？

修改

好吧，你可以确定页面上你想要触发位置的元素。比如，某个段落的顶部，并在你的条件中使用该位置。

var condition = $(element).offset().top; if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }

并且header.fixedClassName具有这些属性（具有位置修复，前0和宽度：100％到您的标头等）。请务必在主体上添加和删除一个类，该类为其填充顶部提供移位标题的高度。

在标题中显示徽标的点之后，http://goodmen.se/使用了一些类似的效果，然后是背景更改。你做了类似的事情。

编辑2

这是一个示例小提琴http://jsfiddle.net/Corsico/vpskd8hd/

如何阻止标题在某个点滚动并使其固定

的JavaScript

HTML

CSS

2 个答案: