Question

我希望能够实现您可以在此处看到的效果：http://www.nearme.co.il/Code/index.htm（如果它在Chrome中无效，请尝试使用IE浏览器）。

这是我迄今取得的成就：http://jsfiddle.net/yuvalsab/op9sg2L2/

HTML

<div class="trasition_wrapper">
    <div class="trasition">1</div>
    <div class="trasition">2</div>
    <div class="trasition">3</div>
    <div class="trasition">4</div>
    <div class="trasition">5</div>
    <div class="trasition">6</div>
    <div class="trasition">7</div>
    <div class="trasition">8</div>
    <div class="trasition">9</div>
    <div class="trasition">10</div>
    <div class="trasition">11</div>
    <div class="trasition">12</div>
    <div class="trasition">13</div>
    <div class="trasition">14</div>
    <div class="trasition">15</div>
</div>
<div class="pagewrap">
    <div class="some_text_1">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_2">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_3">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_4">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_5">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_6">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_7">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_8">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_9">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_10">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_11">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_12">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_13">Lorem ipsum dolor sit amet.</div>
    <div class="some_text_14">Lorem ipsum dolor sit amet.</div>
</div>

CSS

div[class^="some_text"] {   
    padding:50px 0;
    border-bottom:1px solid;
}
div.trasition_wrapper {
    width:100%;
    position: fixed;
    left:100%;
    background:red;
}
.trasition {
    background: red;
    position: absolute;
    width:100%;
}

的jQuery

function animate(element) {
    var lastScrollTop = 0;
    window_width = $(window).innerWidth();
    $(window).scroll(function(event){
        var scrolltop = $(this).scrollTop();
        var stcalc = $(this).scrollTop()*3; // 3 -> Sets the speed of the animation
        if(stcalc >= window_width) {
            stcalc = window_width;
        }
        if(stcalc < window_width) {
           element.animate({
                left:-stcalc
            }, 10);
        } 
        else {
            stcalc = window_width;
            element.animate({
                left:-stcalc
            }, 10);
        }
        lastScrollTop = scrolltop;
    });
}

jQuery(document).ready(function(){
    jQuery('.trasition_wrapper .trasition').each(function() {
        var element = jQuery(this);
        pos=0;
        position = pos+40;
        animate(element);
        element.css('top',position+'px');
    });
});

Answer 1

这是一个不错的解决方案。它可以清理一下，但它确实有效。

http://jsfiddle.net/scheda/4tsokks7/

$(document).on('scroll', function(e) {
    var bodyHeight = $(document).height()
    var windowHeight = $(window).height();
    var scrollTop = $(document).scrollTop();
    var whereAmI = scrollTop + windowHeight

    //we need to make sure we're calculating the percentage correctly
    if (scrollTop < windowHeight) {
        var heightPercentage = scrollTop / bodyHeight * 100;
    } else {
        var heightPercentage = whereAmI / bodyHeight * 100;
    }

    $('.scroll-progress').css('width', heightPercentage + '%');
    $('.progress').text(Math.round(heightPercentage));
});

这很简单。基本上它只是计算你在滚动中的位置，然后用新的宽度和文本更新.scroll-progress。

通过scrollTop更改Element的宽度

1 个答案: