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>

这是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之后会有相对位置。

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;

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

1 个答案: