Question

我想创建视差效果，但是滚动时遇到问题；它在跳。我想平滑滚动。请帮忙。

let READY = {
  onReady: function() {
    $(window).scroll(READY.doScrollAction);
  },
  doScrollAction: function() {
    let wScroll = $(this).scrollTop();
    let scrollingBackground = (50 + (wScroll / 10));

    if (scrollingBackground < 101) {
      $('header').css({
        'background': 'linear-gradient(to right, #0DA7E9 ' + scrollingBackground + '%, #f1f6f6 50%)'
      });

      $('header').css({
        'position': 'fixed',
        'min-height': '100vh',
        'width': '100%',
        'z-index': '9999'
      });
    } else {
      $('header').css({
        'position': 'static',
        'z-index': '0'
      })
    }
  }
};

$(document).ready(READY.onReady);

html,
body {
  padding: 0;
  margin: 0;
}

header {
  min-height: 100vh;
  background: linear-gradient(to right, #0DA7E9 50%, #f1f6f6 50%);
}

.aboutme {
  min-height: 100vh;
  background-color: red;
  padding-top: 500px;
  padding-bottom: 500px;
}

h1 {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="header">
</header>
<section class="aboutme d-flex  align-items-center">
  <h1>
    CONTENT
  </h1>
</section>

jsFiddle

Answer 1

只需像这样编辑CSS：http://jsfiddle.net/21kof8tp/

let READY = {
    onReady: function () {
        //Scroll
        $(window).scroll(READY.doScrollAction);
    },

    doScrollAction: function () {
        let wScroll = $(this).scrollTop();
        let scrollingBackground = (50 + (wScroll / 100));

        if (scrollingBackground < 101) {
            $('header').css({
                'background': 'linear-gradient(to right, #0DA7E9 ' + scrollingBackground + '%, #f1f6f6 50%)'
            });

            $('header').css({
                'position': 'fixed',
                'min-height': '100vh',
                'width': '100%',
                'z-index': '9999'
            });

        } else {
            $('header').css({
                'position': 'static',
                'z-index': '0'
            })
        }
    }
};



$(document).ready(READY.onReady);

html,
body {
  padding:0;
  margin:0;
}

header{
  min-height:1000vh;
   background: linear-gradient(to right, #0DA7E9 50%, #f1f6f6 50%);
}

.aboutme{
  min-height:1000vh;
background-color: red;
padding-top:500px;
padding-bottom:500px;
}

h1{
  text-align:center;
}

html {
  scroll-behavior: smooth;
}

只需编辑滚动的大小即可。

如何使用jQuery修复视差平滑滚动？

1 个答案: