jquery - 滚动时隐藏标题，内容位于其上方

Question

我想创建一个带有 autoHeight 的“固定”标题，当您滚动时内容会覆盖它。

举个例子 http://clapat.ro/berger/about.html

基本上，它是一个主页/介绍部分(id #hero)，具有自动高度并使用视差效果，滚动时看起来内容位于其上方。

这是我在检查元素和源代码时发现的:

标题具有自动高度(默认为 ~500px，使用检查元素时为 321px)在滚动时增加顶部边距并降低不透明度:

height: 321.3px;
top: 400px;
opacity: -0.246105919003115;

这是我发现的一些函数:

function HeroHeight() {
    if( $('#hero').length > 0 ){

        if ($('#hero').hasClass('hero-big')) {
            var heights = window.innerHeight;
            document.getElementById("hero").style.height = heights * 0.85 + "px";
        } else if ($('#hero').hasClass('hero-small')) {
            var heights = window.innerHeight;
            document.getElementById("hero").style.height = heights * 0.40 + "px";               
        } else  {           
            var heights = window.innerHeight;
            document.getElementById("hero").style.height = heights + "px";
        } 

    }

以及负责视差效果的代码

    function HeroParallax() {

    var page_title = $('body');
        var block_intro = page_title.find('#hero');
        if( block_intro.length > 0 ) var block_intro_top = block_intro.offset().top;    
    $( window ).scroll(function() {
        var current_top = $(document).scrollTop(); 
        var hero_height = $('#hero').height();
        if( $('#hero').hasClass('parallax-hero')){            
            block_intro.css('top', (current_top*0.5));          
        }
        if( $('#hero').hasClass('static-hero')){              
            block_intro.css('top', (current_top*1));            
        }
        if( $('#hero').hasClass('opacity-hero')){                
            block_intro.css('opacity', (1 - current_top/hero_height*1));
        }
    });

}

这是我在谷歌搜索时发现的一个简单效果

http://jsfiddle.net/EWefL/

这个 CSS 效果太简单了，因为我没有 JS/jQuery 经验，所以我希望得到一些帮助。

我的问题是:- 我怎样才能使自动高度的东西？- 如何在滚动时增加顶部边距并降低页眉的不透明度？

非常感谢，我们将不胜感激。

Answer 1

好的，所以我找到了解决方案。

http://codyhouse.co/gem/pull-out-intro-effect/

我使用了这个片段，去掉了缩放效果，只使用了不透明度。

如果有人正在寻找它，这里是经过编辑的 javascript:

jQuery(document).ready(function($){
var introSection = $('#cd-intro-background'),
    introSectionHeight = introSection.height(),
    //change scaleSpeed if you want to change the speed of the scale effect
    scaleSpeed = 0.3,
    //change opacitySpeed if you want to change the speed of opacity reduction effect
    opacitySpeed = 1; 

//update this value if you change this breakpoint in the style.css file (or _layout.scss if you use SASS)
var MQ = 1170;

triggerAnimation();
$(window).on('resize', function(){
    triggerAnimation();
});

//bind the scale event to window scroll if window width > $MQ (unbind it otherwise)
function triggerAnimation(){
        $(window).on('scroll', function(){
            //The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
            window.requestAnimationFrame(animateIntro);
        });
}
//assign a scale transformation to the introSection element and reduce its opacity
function animateIntro () {
    var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5);
    //check if the introSection is still visible
    if( $(window).scrollTop() < introSectionHeight) {
        introSection.css({
            'opacity': 1 - scrollPercentage*opacitySpeed
        });
    }
}

});