Question

当我向下滚动页面时，我试图让两组div垂直和水平地相互交叉。

以下是垂直部分的内容。 http://tes-stellar.freeiz.com/ 源代码中提供了所有代码。在某些屏幕上看起来可能很大。

现在我正试图让红色方块从左到右穿过“原始”字样。

我尝试了Mark Dalgleish的“苹果”技巧 here 但是我的3个JS脚本阻止了它。

我在js.js

中有这个

 jQuery(document).ready(function ($) {

$(window).stellar();

var links = $('.navigation').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');

slide.waypoint(function (event, direction) {

    dataslide = $(this).attr('data-slide');

    if (direction === 'down') {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
    }

    else {
        $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
    }

});

mywindow.scroll(function () {
    if (mywindow.scrollTop() == 0) {
        $('.navigation li[data-slide="1"]').addClass('active');
        $('.navigation li[data-slide="2"]').removeClass('active');
    }
});

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
    }, 2000, 'easeInOutQuint');
}

links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});

button.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);

});


});

上面的代码应该是我网站的另一部分（视差背景，但阻止了我想给红方的效果，这是

<body>

<div class="vertical-offset"></div>
<div class="horizontal-offset"></div>

<h2 data-stellar-offset-parent="true">
<div id="original" >
<div class="o-1 part-original" data-stellar-ratio="-2.4"></div>
<div class="o-2 part-original" data-stellar-ratio="2.4"></div>

<!-- many other lines, then -->

<!-- the red square is next -->
<div class="apple" data-stellar-ratio="1"></div>

</div>
</h2>

</body>

我想知道是否有人有任何建议，或者我的代码是否完全错误。

非常感谢！

向下滚动时，jquery div水平和垂直移动

0 个答案: