I have a div that displays content once a product is added to a shopping basket. Basically once someone adds something to cart a popup appears in the top right of the screen pointing at the basket icon. This works ok but I'm concerned about what happens if a customer adds a lot of products to the basket - obviously it's going to run off the bottom of the page and that'll mean some of the content + the checkout button will be out of view.
Here's my working example: https://codepen.io/moy/pen/eVXBvP
I'm happy for just about any solution for this. I thought it would be nice if the footer with price + button always remained in view so only the product area was scrollable but maybe that's not possible?
I guess one of the problems with this is the top value, which means it's difficult (impossible?) to use a max-height: 100% on the .mini-cart container?
Also when scaling the browser horizontally the left edge of the box runs off the screen when it gets really narrow - how can I avoid this? I've resolved a similar issue before by using:
position: fixed;
top: 100px;
right: 30px;
left: 30px;
width: auto;
max-width: 500px;
But the problem with that is the div aligns to the left of the page by default and I need to left aligned. Is that possible?
I've tried the vh values but again I think the top: 100px value causes problems with that.
To prevent the cart from going off the left side of the screen on resize, consider changing width to 500px and max-width to no more than 100%, I suggest max-width: calc(100% - 40px); as you got the cart at a right of 30px;
.mini-cart {
background: white;
border-top: 4px solid red;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 15px;
position: fixed;
top: 60px;
right: 30px;
transition: all .20s;
z-index: 1000;
width: 500px;
max-width: calc(100% - 40px);
}
To help with scrolling for more items. You can let the entire cart scroll in place, or just let the items mini-cart__body scroll with setting a fixed max-height and set overflow to auto. NB: I set the max-height to 30vh (vertical height of screen); for demonstration. something like 80vh will make more sense for the live site.
.mini-cart__body {
overflow-y: auto;
padding-right: 30px;
margin-right: -30px;
max-height: 30vh;
overflow: auto;
box-sizing: border-box;
width: 100%;
}
** UPDATE: based on the author's comments, it would be a good idea to handle for screens with a smaller height.
For this, just an idea here as there are many options... change the cart's position from being fixed to absolute
like:
@media screen and (max-height: 500px) {
.mini-cart {
position:absolute;
}
.mini-cart__body {
max-height: inherit;
}
}
** Here's the entire snippet (with the SCSS compiled to CSS to work here)
NB: some of the styles might have gotten changed in the css conversion. so, just use the following as an example.
document.addEventListener('DOMContentLoaded', function() {
var mn = $('.page-head'),
core = $('.band'),
mns = 'page-head-scrolled',
bit, hdr;
$(window).resize(function() {
bit = mn.outerHeight();
hdr = $('.info-bar').outerHeight();
})
.resize().scroll(function() {
if ($(this).scrollTop() > hdr) {
mn.addClass(mns);
core.css('margin-top', bit);
} else {
mn.removeClass(mns);
core.attr('style', '');
}
})
.on('load', function() {
$(this).scroll();
});
});/* =================
#MIXINS
================= */
/**
* Clearfix
*/
/**
* Typography
*/
/**
* Media Queries.
*
* 1. $bp2 = 480px (30rem)
* 2. $bp3 = 600px (37.5rem)
* 3. $bp4 = 768px (48rem)
* 4. $bp5 = 1024px (64rem)
* 5. $bp6 = 1220px (76.250rem)
* 6. $bp7 = 1400px (87.5rem)
*/
/* =================
#BASE
================= */
/* Site */
html,
body {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
padding: 0;
}
/* Page */
.page {
margin: 0;
padding: 0;
position: relative;
}
/* Content area */
.band {
padding: 60px 0 30px;
}
.wrap {
margin: 0 auto;
max-width: 1000px;
}
/* =================
#HEADER
================= */
/* Info bar */
.info-bar {
background: black;
color: white;
padding: 2px 0;
text-align: center;
width: 100%;
}
/* Header */
.page-head {
background: #eee;
color: #000;
padding: 10px 0;
text-align: center;
width: 100%;
}
.page-head.page-head-scrolled {
position: fixed;
top: 0;
}
/* =================
#MINI CART
================= */
.mini-cart {
background: white;
border-top: 4px solid red;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 15px;
position: fixed;
top: 60px;
right: 30px;
transition: all .20s;
z-index: 1000;
width: 100%;
max-width: 500px;
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/* [6] */
}
.mini-cart:before, .mini-cart:after {
content: "";
display: table;
}
.mini-cart:after {
clear: both;
}
.mini-cart:before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 8px solid red;
content: "";
display: block;
height: 0;
position: absolute;
top: -12px;
right: 30px;
width: 0;
}
@media (min-width: 64em) {
.mini-cart {
padding: 30px;
}
}
/**
* `mini-cart` header (title + close).
*/
.mini-cart__head {
border-bottom: 2px solid #eee;
padding-bottom: 30px;
}
.mini-cart__head:before, .mini-cart__head:after {
content: "";
display: table;
}
.mini-cart__head:after {
clear: both;
}
.mini-cart__title {
font-size: 18px;
font-size: 1.8rem;
margin-bottom: 0;
}
.mini-cart__close {
background: none;
fill: #ccc;
float: right;
height: 20px;
margin-left: 15px;
padding: 0;
text-shadow: none;
width: 20px;
}
.mini-cart__close:hover {
fill: #333;
}
/**
* `mini-cart` body (products).
*/
.mini-cart__body {
overflow-y: auto;
padding-right: 30px;
margin-right: -30px;
max-height: 30vh;
overflow: auto;
box-sizing: border-box;
width: 100%;
}
.mini-cart__item {
border-bottom: 2px solid #eee;
clear: both;
padding: 30px 120px 30px 115px;
position: relative;
}
.mini-cart__item:before, .mini-cart__item:after {
content: "";
display: table;
}
.mini-cart__item:after {
clear: both;
}
.mini-cart__item .u-photo {
display: block;
float: left;
margin-left: -115px;
width: 100px;
}
.mini-cart__item .p-name {
font-size: 14px;
font-size: 1.4rem;
margin-bottom: 5px;
}
.mini-cart__item .e-description {
font-size: 12px;
font-size: 1.2rem;
margin-bottom: 5px;
}
.mini-cart__item .p-price {
margin-bottom: 0;
}
.mini-cart__item .qty {
position: absolute;
top: 30px;
right: 0;
text-align: right;
}
/**
* `mini-cart` foot (price + button).
*/
/* =================
#MIXINS
================= */
/**
* Clearfix
*/
/**
* Typography
*/
/**
* Media Queries.
*
* 1. $bp2 = 480px (30rem)
* 2. $bp3 = 600px (37.5rem)
* 3. $bp4 = 768px (48rem)
* 4. $bp5 = 1024px (64rem)
* 5. $bp6 = 1220px (76.250rem)
* 6. $bp7 = 1400px (87.5rem)
*/
/* =================
#BASE
================= */
/* Site */
html,
body {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
padding: 0;
}
/* Page */
.page {
margin: 0;
padding: 0;
position: relative;
}
/* Content area */
.band {
padding: 60px 0 30px;
}
.wrap {
margin: 0 auto;
max-width: 1000px;
}
/* =================
#HEADER
================= */
/* Info bar */
.info-bar {
background: black;
color: white;
padding: 2px 0;
text-align: center;
width: 100%;
}
/* Header */
.page-head {
background: #eee;
color: #000;
padding: 10px 0;
text-align: center;
width: 100%;
}
.page-head.page-head-scrolled {
position: fixed;
top: 0;
}
/* =================
#MINI CART
================= */
.mini-cart {
background: white;
border-top: 4px solid red;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 15px;
position: fixed;
top: 60px;
right: 30px;
transition: all .20s;
z-index: 1000;
width: 100%;
max-width: 500px;
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/* [6] */
}
.mini-cart:before, .mini-cart:after {
content: "";
display: table;
}
.mini-cart:after {
clear: both;
}
.mini-cart:before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 8px solid red;
content: "";
display: block;
height: 0;
position: absolute;
top: -12px;
right: 30px;
width: 0;
}
@media (min-width: 64em) {
.mini-cart {
padding: 30px;
}
}
/**
* `mini-cart` header (title + close).
*/
.mini-cart__head {
border-bottom: 2px solid #eee;
padding-bottom: 30px;
}
.mini-cart__head:before, .mini-cart__head:after {
content: "";
display: table;
}
.mini-cart__head:after {
clear: both;
}
.mini-cart__title {
font-size: 18px;
font-size: 1.8rem;
margin-bottom: 0;
}
.mini-cart__close {
background: none;
fill: #ccc;
float: right;
height: 20px;
margin-left: 15px;
padding: 0;
text-shadow: none;
width: 20px;
}
.mini-cart__close:hover {
fill: #333;
}
/**
* `mini-cart` body (products).
*/
.mini-cart__body {
overflow-y: auto;
padding-right: 30px;
margin-right: -30px;
}
.mini-cart__item {
border-bottom: 2px solid #eee;
clear: both;
padding: 30px 120px 30px 115px;
position: relative;
}
.mini-cart__item:before, .mini-cart__item:after {
content: "";
display: table;
}
.mini-cart__item:after {
clear: both;
}
.mini-cart__item .u-photo {
display: block;
float: left;
margin-left: -115px;
width: 100px;
}
.mini-cart__item .p-name {
font-size: 14px;
font-size: 1.4rem;
margin-bottom: 5px;
}
.mini-cart__item .e-description {
font-size: 12px;
font-size: 1.2rem;
margin-bottom: 5px;
}
.mini-cart__item .p-price {
margin-bottom: 0;
}
.mini-cart__item .qty {
position: absolute;
top: 30px;
right: 0;
text-align: right;
}
/**
* `mini-cart` foot (price + button).
*/
.mini-cart {
background: white;
border-top: 4px solid red;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
box-sizing: border-box;
padding: 15px;
position: fixed;
top: 60px;
right: 30px;
transition: all .20s;
z-index: 1000;
width: 500px;
max-width: calc(100% - 40px);
}
.mini-cart__total:before, .mini-cart__total:after {
content: "";
display: table;
}
.mini-cart__total:after {
clear: both;
}
.mini-cart__total span {
float: right;
}
.mini-cart__btn {
margin-bottom: 0;
}
.mini-cart__total:before, .mini-cart__total:after {
content: "";
display: table;
}
.mini-cart__total:after {
clear: both;
}
.mini-cart__total span {
float: right;
}
.mini-cart__btn {
margin-bottom: 0;
}
@media screen and (max-height: 350px) {
.mini-cart {
position:absolute;
}
.mini-cart__body {
max-height: inherit;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
<div class="info-bar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<header class="page-head">
<h3>Main Nav would go in here</h3>
</header>
<div class="band">
<div class="wrap">
<h4>All Page content follows</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Start #mini-cart -->
<div class="mini-cart">
<div class="mini-cart__head">
<a href="#" class="mini-cart__close">Close</a>
<h4 class="mini-cart__title">Your Basket</h4>
</div>
<div class="mini-cart__body">
<div class="mini-cart__item h-product">
<img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
<h2 class="p-name">Product title</h2>
<p class="e-description">Short product description</p>
<p class="p-price">£99.99</p>
<div class="qty qty--small">QTY</div>
</div>
<div class="mini-cart__item h-product">
<img src="http://via.placeholder.com/350x150" class="u-photo" alt="ALT TEXT" />
<h2 class="p-name">Product title</h2>
<p class="e-description">Short product description</p>
<p class="p-price">£99.99</p>
<div class="qty qty--small">QTY</div>
</div>
</div>
<div class="mini-cart__foot">
<p class="mini-cart__total">Total <span>£11.00</span></p>
<a href="#" class="mini-cart__btn btn btn--wide">Checkout</a>
</div>
</div>
<!-- End #mini-cart -->