页面滚动固定购物车元素时出现间距消失问题求助

问题分析 #

购物车切换为fixed定位后，脱离了原父容器的布局上下文，丢失了Bootstrap列自带的水平间距；同时添加/移除商品后购物车高度变化，未实时触发定位逻辑更新，导致滚动到蓝色区块时定位偏移，右侧缩进消失。

解决方案 #

1. 保留水平定位：设置fixed定位时，同步计算并设置购物车的右侧偏移量，继承父容器的水平间距。
2. 实时更新定位：在商品添加/移除的点击事件中，重新调用定位函数，适配购物车高度变化。

修改后的代码 #

JavaScript #

let VPDetail = {
    init: function () {
        let _self = this;
        $(window).resize(function () {
            _self.positionContainer();
        });

        $(window).scroll(function () {
            _self.positionContainer();
        });

        _self.positionContainer();
    },
    positionContainer: function () {
        let rp = $(".js-real-position");
        let column = $('.js-column-to-scroll-block');
        let columnAdd = $('.js-column-to-scroll-block-additional');
        let sp = $(".js-static-position");
        let topDelta = 20;
        let top = topDelta;

        // 计算父容器的右侧偏移，用于fixed定位时保留水平间距
        let viewportWidth = $(window).width();
        let parentOffset = rp.offset();
        let rightOffset = viewportWidth - (parentOffset.left + rp.outerWidth());

        // 购物车高度变化后，重新计算底部限制位置
        let bottomLimit = column.position().top + column.height() + columnAdd.height() - sp.height();
        if (bottomLimit < $(document).scrollTop() + topDelta) {
            top = bottomLimit - $(document).scrollTop();
        }

        if ($(document).scrollTop() + topDelta > rp.position().top) {
            sp.css({
                top: top + 'px',
                right: rightOffset + 'px',
                'position': 'fixed'
            });
        } else {
            sp.css({
                top: '0',
                right: 'auto',
                'position': 'static'
            });
        }

        sp.width(sp.parent().width());
    },
}

$(function (){
    VPDetail.init();
})

$(".add1").click(function () {
  $('.add1').css('display', 'none');
  $('.added1').css('display', 'block');
  VPDetail.positionContainer(); // 更新购物车定位
});

$(".add2").click(function () {
  $('.add2').css('display', 'none');
  $('.added2').css('display', 'block');
  VPDetail.positionContainer(); // 更新购物车定位
});

$(".added1").click(function () {
  $('.added1').css('display', 'none');
  $('.add1').css('display', 'block');
  VPDetail.positionContainer(); // 更新购物车定位
});

$(".added2").click(function () {
  $('.added2').css('display', 'none');
  $('.add2').css('display', 'block');
  VPDetail.positionContainer(); // 更新购物车定位
});

CSS（无需修改） #

.color-block {
    padding: 24px;
    background: #08e8de;
    border-radius: 10px;
}

.cart-block {
    padding: 24px;
    background: #8A2BE2;
    border-radius: 10px;
}

.add1, .add2 {
  height: 300px;
  cursor: pointer;
}

.added1, .added2 {
  cursor: pointer;
  height: 150px;
  display: none;
}

.package-detail-info {
  margin-top: 100px;
}

HTML（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="row margin-block-small pt-4">
    <div class="col-12 col-md-8 col-lg-9">
        <h1 class="h2"><strong>Package</strong></h1>
        <div class="vp-tickets js-vp-tickets">
            <div class="mb-3"></div>
            <div class="please-select-items alert alert-info"><i class="fa fa-info-circle"></i> Please select items</div>
            <div class="color-block mb-4" id="ticket-1">
                <div class="item">
                    <div class="add1">Add 1</div>
                </div>
            </div>
      <div class="color-block mb-4" id="ticket-2">
                <div class="item">
                    <div class="add2">Add 2</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 js-column-to-scroll-block" style="">
        <div class="package-detail-info">
            <div class="js-real-position" style="">
                <div class="js-static-position static-position" style="top: 0px; position: static; width: 337.25px;">
                    <div class="vp-small-order-info cart-block mb-3">
                        <div class="js-selected-info"></div>
                        <div><small>Options:</small></div>
            <div class="added1">Added 1</div>
            <div class="added2">Added 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row margin-block-small">
    <div class="col-12 col-md-8 col-lg-9 js-column-to-scroll-block-additional">
        <div style="height: 1000px; background: blue;"></div>
    </div>
</div>

关键修改点 #

• 新增rightOffset计算，确保fixed定位时购物车保留原父容器的右侧间距。
• 在所有商品状态切换的点击事件中调用VPDetail.positionContainer()，实时更新购物车的定位参数。
• 优化底部限制位置的计算逻辑，避免高度变化导致的定位错误。

内容的提问来源于stack exchange，提问作者Hector