0

私は magento ショップを作成しています。ユーザーがウィンドウをスクロールした後に toTop ボタンを使用できるようにしたいと考えています。

私のコードを以下に貼り付けます。正常に動作しますが、ウィンドウが一番上に表示された後、移動できなくなり、動かなくなります。

jQuery(window).scroll(function() {
    var top = jQuery(window).scrollTop();

    if (top > 77) {
    jQuery(function() {
        jQuery('img.arrowup').fadeIn();
        jQuery('div.header_bg').show();
        jQuery('div.mainmenu').addClass('stick');
        jQuery('body div.header-container').next().addClass('pad');
        jQuery("img.arrowup").on('click', function(e) {
        e.preventDefault();
        jQuery('body,html').animate({scrollTop:10},800);
    });
    })} else {
        jQuery('div.header_bg').hide();
        jQuery('img.arrowup').fadeOut();
        jQuery('body div.header-container').next().removeClass('pad');
        jQuery('div.mainmenu').removeClass('stick');
    }

});

============================

みんな助けてくれてありがとう、ここにスティックヘッダーとtoTopアニメーションを使った実用的なソリューションがあります:)

    var scrollDiv=jQuery(this);
    jQuery(window).scroll(function(){  
        if(jQuery(window).scrollTop()<="77"){
            jQuery("img.arrowup").fadeOut("slow");
            jQuery('div.header_bg').hide();
            jQuery('div.mainmenu').removeClass('stick');
        } else {
            jQuery("img.arrowup").fadeIn("slow");
            jQuery('div.header_bg').show();
            jQuery('div.mainmenu').addClass('stick');
        }
    });
    jQuery("img.arrowup").click(function(){
        jQuery("html, body").animate({scrollTop:0},"slow");
    });
4

1 に答える 1

0

アニメーションが競合を作成する理由を理解するために、最初にこの回答を読むことをお勧めしますこれを試してみるよりも、スクロール値に依存します:

$(document).ready(function() {
   $(window).scroll(function() {
      var scrollVal = $(this).scrollTop(); // use this instead of window

      if ( scrollVal >= 0 &&  scrollVal < 77 ) {
         //do something without animations
         $('div.header_bg').hide();
         $('div.mainmenu').removeClass('stick');

      } else if ( scrollVal === 77 ){
         //i didn't try this before but it may work,
         //since value equals 77 once, it may not create animation conflicts
         $('img.arrowup').fadeIn();

      } else if ( scrollVal > 77 ) {
         //do something without animations
         $('div.header_bg').show();
         $('div.mainmenu').addClass('stick');
      }
  });
});
于 2013-02-06T18:25:07.233 に答える