1

提前致谢。当您滚动产品页面（大约 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>

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

4

0 回答 0