0

我需要知道如何在向下滚动时将像素添加到 div 的顶部，并在向上滚动时将像素删除到 div 的顶部。

这是HTML

<div id="pourvoirie" data-type="background" data-speed="10">
    <div id="para">
        <div class="contenantNoir">
            <div class="texte wrap">
                <h1>La pourvoirie</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis mi vel sem sagittis aliquam eu non odio. Aenean nibh sem, aliquam consequat odio at, ultrices luctus felis. Donec eu accumsan nisi. Duis id mi magna. Vestibulum eleifend cursus lacus. Phasellus id erat sollicitudin, mollis urna sed, vestibulum nibh. Vivamus ligula nisi, porttitor eu est vel, imperdiet sollicitudin odio. Morbi a lacus sodales, tristique nunc vel, aliquam dolor. Quisque non venenatis tellus, sed porttitor nisi. Praesent ac commodo purus. Quisque elementum ultrices lectus vel pellentesque. </p>
                <p>Phasellus id erat sollicitudin, mollis urna sed, vestibulum nibh. Vivamus ligula nisi, porttitor eu est vel, imperdiet sollicitudin odio. Morbi a lacus sodales, tristique nunc vel, aliquam dolor. Quisque non venenatis tellus, sed porttitor nisi. Praesent ac commodo Quisque elementum ultrices lectus vel pellentesque. </p>
            </div>
        </div>
    </div>
</div>

这是 script.js

$(window).scroll(function () {
        var positionTopP = $('#pourvoirie').offset().top;
        var positionYP = positionTopP - $(window).scrollTop();
        var positionTopCN = $('.contenantNoir').offset().top;
        var positionYCN = positionTopCN - $(window).scrollTop();
        if(positionYP<=72){
            $('#para').css({ 'top': '0px' });
            $('#para').css({ 'position': 'fixed' });
            $('.contenantNoir').css({ 'padding-top': '+=5' });
            $('.contenantNoir').css({ 'color': 'transparent' });
            $('.contenantNoir').css({ 'text-shadow': '0px 0px 5px #fff' });


                console.log(positionYP);
                if(positionYP<=-350){
                    $('.contenantNoir').css({ 'top': positionYCN });
                    console.log('position:carre noir' + positionYCN);
                }else{
                    /*if(positionYCN==0){
                        $('.contenantNoir').css({ 'top': '0px' });
                    }else{
                        $('.contenantNoir').css({ 'padding-top': '-=5' });
                    }*/
                    $('.contenantNoir').css({ 'padding-top': '-=5' });
                    console.log('ca marche tu?');
                }
            /*if(positionYCN>=179){
                console.log('descend');
                $(window).scroll(function () {
                    $('.contenantNoir').css({ 'top': '+=5' });
                    }
                });
            }*/


        }else{
            $('#para').css({ 'top': '46px' });
            $('#para').css({ 'position': 'relative' });
            /*$('#galerie').css({ 'position': 'relative' });*/


        }
    });

我想要做的是当#pourvoirie距离顶部 72px 时，我修复了div. 接下来，如果我继续向下滚动，.contenantNoir将向下但#pourvoirie仍保持位置固定。如果我向上滚动，它将反向执行相同的操作，即.contenantNoir向上直到到达顶部 0px，之后#pourvoirie将具有相对位置。

4

1 回答 1

-1

这是我找到的解决方案

var st = $(this).scrollTop();
       if (st > lastScrollTop){
        console.log('Down');
           // downscroll code
           if($('.contenantNoir').hasClass('fixed')){
             $('.contenantNoir').css({ 'top': '+=5' });
           }
       } else {
          // upscroll code
          console.log('up');
          if($('.contenantNoir').hasClass('fixed')){
            $('.contenantNoir').css({ 'top': '-=5' });
          }
       }
       lastScrollTop = st;
于 2013-09-19T20:20:14.077 回答