Question

我使用单页滚动模板并添加了我自己的导航栏。在页面滚动中，我需要为导航栏设置动画。滚动后，正文将更改类＆＃39; FP-观看-0＆＃39;到了fp-viewing-1-0＆＃39;等等。如果从fp-viewing-0转到fp-viewing-1-0它会动画没有问题，但是一旦我回去它就不再有动画了。这是我的解决方案。有任何建议如何解决这个问题？

window.setInterval( function() {
    if($('body').hasClass('fp-viewing-1-0')){
        $('.circle').animate({
            top:'30'
        });
        $('#menuBar').animate({
            backgroundColor: '#fff',

        }).css({
            borderBottom: '1px solid #f3f3f3'
        });
        $('#menuBarWrapper').css({
            boxShadow:' 0 0 10px #333'
        });
        console.log('white');
    }

        if($('body').hasClass('fp-viewing-0')){
        $('.circle').animate({
            top:'0'
        });
        $('#menuBar').animate({
            backgroundColor: 'none',

        }).css({
            borderBottom: 'none'
        });
        $('#menuBarWrapper').css({
            boxShadow:'none'
        });
        console.log('white');
    }



},10);

Answer 1

我制作了一些不同的代码，其中动画是通过CSS制作的，具体取决于body元素当前活动的类。从我的经验来看，我试图避免使用jQuery动画，与CSS动画相比它们太慢了。

https://jsfiddle.net/6jo3dvzg/3/

<div id="test">
  <div class="circle"></div>
  <div id="menuBar">menuBar</div>
  <div id="menuBarWrapper">menuBarWrapper</div>
  <div class="fp-viewing-0">fp-viewing-0</div>
  <div class="fp-viewing-1-0">fp-viewing-1-0</div>
</div>

handleScroll()
$(window).on('scroll', handleScroll)

function handleScroll() {
  var curr = $(window).scrollTop()

  if(curr >= $('#test .fp-viewing-0').offset().top) {
    $('body').removeClass().addClass('fp-viewing-0')
  }

  if(curr >= $('#test .fp-viewing-1-0').offset().top) {
    $('body').removeClass().addClass('fp-viewing-1-0')
  }

  console.log($('body').attr('class'))
}

hasClass条件不会改变其他Jquery中的css

1 个答案: