animacja w jQury / JavaScript

Question

Witam, potrzebuję pomocy z pewnym kodem, więc chciałbym by po scrollowaniu >= 30 pojawił się button z możliwością wrócenia do top (fix header udało mi się zrobić), wracając nie chce by się pojawiał od tak fadeIn ect,

zależy mi by wyjeżdżał z dołu ekranu, udało mi się to zrobić, ale animacja w jQuery szaleje, może jest jakiś sposób, by wywołać ją tylko raz? i zrobić to samo, ale w dół gdy będzie < 30? (39 linjka)

tutaj podgląd

$( document ).ready( function () {

    var active_switch = $( '#active-switch' );

    var sidenav = $( '.sidenav' );

    var fixed_action_btn = $( '.fixed-action-btn' );

    var active_nav = $( '.sidenav > ul > li > a' );

    var click_toggle = $( '#click-to-toggle' );

    var header = $( 'header' );

    var main = $( 'main' );

    var top = $( '.top' );

    /* Fixed header & back to top */

        $( window ).scroll( function () {
            var height = $( window ).scrollTop();


            if ( height >= 30 && $( window ).width() > 600 ) {

                main.addClass( 'main-sticky' );
                header.addClass( 'sticky' );
            } else if ( $( window ).width() <= 600 ) {

                header.addClass( 'sticky' );
                main.addClass( 'main-sticky' );
            } else {

                main.removeClass( 'main-sticky' );
                header.removeClass( 'sticky' );
            }

            if ( height >= 30 ) {

                top.css( {'opacity' : '1'} );
                top.show().animate( { 'top' : '+=10%' }, 'slow');
            } else if ( height < 30 ) {

                top.hide().animate( { 'top' : '-=10%' }, 'slow');
                top.css( {'opacity': '0'} );
            }

            top.click( function () {
                $( 'html, body' ).animate( { 'scrollTop': 0 }, 500);
            });
        });
    /* END Fixed header & back to top */
});

 

Answer 1

Stwórz klasę np. np.show i manipuluj nią za pomocą addClass() removeClass()

​​​$(window).scroll(function() {
    if (height > 30) {
      top.addClass('show');
    } else {
      top.removeClass('show');
    }
  });

  top.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

Do animacji użyj transition w css.

Comments

udało się naprawić :)