Question

当谈到jQuery时，我是一个菜鸟，所以请耐心等待我： - ）

我已经（通过一些互联网帮助）创建了一个视差页面该页面的内容可以从WordPress环境中动态加载。

问题如下：
在我的例子中，我使用了三页。两个有背景，一个没有
1.背景
2.没有背景
3.背景

问题是包含背景的第三页开始滚动，而viewport甚至不可见。
因此，当用户看到第三部分时，图像的大部分内容已经消失。

希望我有所作为。

我发现：
$('.my_class').parallax("50%", 0.2);处理滚动的速度。

如果我调整它，它将适用于三页，但效果几乎消失了......

这会动态加载页面：

<?php $args = array(
    'sort_order' => 'asc',
    'sort_column' => 'menu_order',
    'child_of' => $post->ID,
    'post_type' => 'page',
    'post_status' => 'publish'
    ); 
    $pages = get_pages($args); 
    foreach ($pages as $page){
        $thumbnail_object = get_post(get_post_thumbnail_id($page->ID));
        echo '
        <div class="my_class" style="background:url('.$thumbnail_object->guid.') no-repeat center center fixed;-webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;margin: 0 0 5% 0;">
        <div class="wrap_1280">';
        echo apply_filters( 'the_content', $page->post_content );
    echo '</div>    
    </div>';

    }

?>

我将内嵌背景图片加载，因为我可以动态地将图像更改为用户上传的内容。

我有什么想法可以解决这个问题吗？

----------更新-----------
这是我放在身体标签中的内容

<script>
function isElementInViewport (el) {

//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
}

var rect = el.getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight ||   document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)   /*or $(window).width() */
);
}
function onVisibilityChange(el, callback) {
var old_visible;
return function () {
    var visible = isElementInViewport(el);
    if (visible != old_visible) {
        old_visible = visible;
        if (typeof callback == 'function') {
            callback();
        }
    }
}
}

var handler = onVisibilityChange(el, function() {


jQuery('.full_width_parallax_scroll').parallax("50%", 0.8);

jQuery(window).scroll(function() {
if($(this).scrollTop() > 150) {
    if(!$('main-menu').hasClass('floating')) {
       $('.main-menu').addClass('floating');
    }
} else {
    jQuery('.main-menu').removeClass('floating');
}
});

});


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler); 

/* //non-jQuery
if (window.addEventListener) {
addEventListener('DOMContentLoaded', handler, false); 
addEventListener('load', handler, false); 
addEventListener('scroll', handler, false); 
addEventListener('resize', handler, false); 
} else if (window.attachEvent)  {
attachEvent('onDOMContentLoaded', handler); // IE9+ :(
attachEvent('onload', handler);
attachEvent('onscroll', handler);
attachEvent('onresize', handler);
}
*/
</script>

将图像定位在视差滚动中

0 个答案: