Question

先谢谢了。当您滚动产品页面（大约30％）时，我将在底部看到AddToCart按钮-台式机和移动版（请参见示例）。但是，当您返回页面顶部时，我希望它消失。我怎样才能做到这一点？我尝试创建另一个按钮，但是它不起作用。

谢谢

主题液体的头

{{ 'addtocartsticky.js' | asset_url | script_tag }}

addtocartsticky.js.liquid文件

 if($(window).width() > 991){
    $( document ).ready(function() {
      setTimeout(function(){
        var img_zoom_class = $(".slider-for .slick-active img").attr('class');
        $('.'+img_zoom_class).elevateZoom({         
          zoomType              : "lens",
          lensShape : "round",
          lensSize    : 200        
        });
      }, 100);
    });
  }


  setTimeout(
    function(){
      $('#AddToCartForm_id .cart-btn').clone().addClass('fix-cart-btn').appendTo("body");
    }, 1000);

  $(document).on('click', '.fix-cart-btn', function(){   
    $('#AddToCartForm_id .cart-btn').trigger('click');
  });

  $(document).ready( function() {
    var Wwidth = $(window).width();
    $.fn.is_on_screen = function(){
      var win = $(window);
      var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
      };
      viewport.right = viewport.left + win.width();
      viewport.bottom = viewport.top + win.height();

      var bounds = this.offset();
      bounds.right = bounds.left + this.outerWidth();
      bounds.bottom = bounds.top + this.outerHeight();

      return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };

    $(window).on("scroll", function () {
      if ($(this).scrollTop() > 1000) {
        $('.fix-cart-btn').show();

        if( $('footer').length > 0 ) {              
          if( $('footer').is_on_screen() ) {            
            $('.fix-cart-btn').hide();
          } else {
            $('.fix-cart-btn').show();
          }
        }     
      } else {
        $('.fix-cart-btn').hide();
      }   
    });
  });

样式CSS文件

        .fix-cart-btn{
position:fixed;
     left:0;
     bottom:0;
    display:none;z-index:99;
     background:#ff7600;
     height:45px;
      width:100%;
      font-size:22px;
      font-family:"Muli",sans-serif;
      color:#ffffff;
      border:none;
      font-weight:bold;
      text-transform:uppercase;
      line-height:26px;
      padding:7px 25px}

HTML product-template.liquid

<button type="button" name="add" id="AddToCart" class="btn stiky_button fix-cart-btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }} </span>
          </button>

当然我想念一些东西。谢谢

滚动时底部的添加到购物车按钮-Shopify

0 个答案: