wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化购物车结账页面滚动动画

This commit is contained in:
pushuo 2022-07-04 09:49:56 +08:00
parent b01ae254e2
commit fc40c586ab
5 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/build/beike/shop/default/css/app.css vendored
View File

@ -481,6 +481,14 @@ body.page-cart .total-wrap .list-group li .total-price {
body.page-checkout .checkout-black {
margin-bottom: 2.6rem;
}
body.page-checkout .right-column {
position: relative;
}
@media (min-width: 992px) {
body.page-checkout .right-column {
padding-left: 2rem;
}
}
body.page-checkout .checkout-title {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 16px;

38
public/build/beike/shop/default/js/app.js vendored
View File

@ -42,21 +42,41 @@ $(document).ready(function ($) {
var totalWrapWidth = $('.fixed-top-line').outerWidth();
var totalWrapHeight = $('.fixed-top-line').outerHeight();
var totalWrapLeft = $('.fixed-top-line').offset().left;
var footerTop = $('footer').offset().top;
var footerMarginTop = Math.abs(parseInt($('footer').css("marginTop")));
$(window).scroll(function () {
if ($(this).scrollTop() > totalWrapTop) {
$('.fixed-top-line').addClass('fixed-top-line-fixed').css({
'left': totalWrapLeft,
$('.fixed-top-line').css({
position: 'fixed',
top: 0,
bottom: 'auto',
'width': totalWrapWidth
});
if ($('.total-old').length > 0) return;
$('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
if (!$('.total-old').length) {
$('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
}
if ($(this).scrollTop() + totalWrapHeight > footerTop - footerMarginTop) {
$('.fixed-top-line').css({
position: 'absolute',
top: 'auto',
bottom: '0',
'width': totalWrapWidth
});
}
} else {
$('.total-old').remove();
$('.fixed-top-line').removeClass('fixed-top-line-fixed').css({
'left': 0,
'width': 'auto'
});
}
$('.fixed-top-line').removeAttr('style');
} // if ($(this).scrollTop() > totalWrapTop) {
// $('.fixed-top-line').addClass('fixed-top-line-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
// if ($('.total-old').length > 0) return;
// $('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
// } else {
// $('.total-old').remove();
// $('.fixed-top-line').removeClass('fixed-top-line-fixed').css({'left': 0, 'width': 'auto'})
// }
});
})(window.jQuery);
});

8
resources/beike/shop/default/css/page-checkout.scss vendored
View File

@ -4,6 +4,14 @@ body.page-checkout {
.checkout-black {
margin-bottom: 2.6rem;
}
.right-column {
position: relative;
@media (min-width: 992px) {
padding-left: 2rem;
}
}
.checkout-title {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 16px;

25
resources/beike/shop/default/js/app.js vendored
View File

@ -31,16 +31,33 @@ $(document).ready(function ($) {
const totalWrapWidth = $('.fixed-top-line').outerWidth();
const totalWrapHeight = $('.fixed-top-line').outerHeight();
const totalWrapLeft = $('.fixed-top-line').offset().left;
const footerTop = $('footer').offset().top;
const footerMarginTop = Math.abs(parseInt($('footer').css("marginTop")));
$(window).scroll(function () {
if ($(this).scrollTop() > totalWrapTop) {
$('.fixed-top-line').addClass('fixed-top-line-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
if ($('.total-old').length > 0) return;
$('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
$('.fixed-top-line').css({position: 'fixed', top: 0, bottom: 'auto', 'width': totalWrapWidth})
if (!$('.total-old').length) {
$('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
}
if ($(this).scrollTop() + totalWrapHeight > footerTop - footerMarginTop) {
$('.fixed-top-line').css({position: 'absolute', top: 'auto', bottom: '0', 'width': totalWrapWidth})
}
} else {
$('.total-old').remove();
$('.fixed-top-line').removeClass('fixed-top-line-fixed').css({'left': 0, 'width': 'auto'})
$('.fixed-top-line').removeAttr('style')
}
// if ($(this).scrollTop() > totalWrapTop) {
// $('.fixed-top-line').addClass('fixed-top-line-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
// if ($('.total-old').length > 0) return;
// $('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
// } else {
// $('.total-old').remove();
// $('.fixed-top-line').removeClass('fixed-top-line-fixed').css({'left': 0, 'width': 'auto'})
// }
})
})(window.jQuery);
});

2
themes/default/checkout.blade.php
View File

@ -85,7 +85,7 @@
</div>
</div>
<div class="col-12 col-md-4">
<div class="col-12 col-md-4 right-column">
<div class="card total-wrap fixed-top-line">
<div class="card-header"><h5 class="mb-0">CART TOTALS</h5></div>
<div class="card-body">