Question

我在我的Wordpress网站上使用Bootstrap 3的jumbotron功能。我用它来为我的主页创建一个大标题。我希望那里的文字能够对背景图像进行视差处理。

我能找到的唯一例子没有编码在Wordpress中工作。我目前使用的JavaScript代码是

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('height', (jumboHeight-scrolled) + 'px');
}

$(window).scroll(function(e){
parallax();
});

使用此HTML：

<div class="container-fluid jumbotron"> 

<class = "bg"></div>
<header>    
        <nav class="navbar navbar-custom row" role="navigation">   
            <!-- Brand and toggle get grouped for better mobile display --> 
                <div class="navbar-header"> 

                <div class="navbar-brand">
                    <?php if (get_theme_mod(FT_scope::tool()->optionsName . '_logo', '') != '') { ?>
                        <a class="mylogo" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><img relWidth="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxWidth', 0)); ?>"  relHeight="<?php echo intval(get_theme_mod(FT_scope::tool()->optionsName . '_maxHeight', 0)); ?>" id="ft_logo" src="<?php echo get_theme_mod(FT_scope::tool()->optionsName . '_logo', ''); ?>" alt="" /></a>
                    <?php } else { ?>
                        <h1 class="site-title logo"><a id="blogname" rel="home" href="<?php bloginfo('siteurl');?>/" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
                    <?php } ?>
                    </div>      
                </div> 

<!-- ... -->

我得到的最好的是jumbotron背后的图像，什么都不做。

将jumbotron变成视差标题

0 个答案: