通过滚动更改 div 的顶部位置

Question

我需要知道如何在向下滚动时将像素添加到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>

这是脚本.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将有一个相对的位置。

Answer 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;