How to Unfreeze Product Item Details on Product Page to Start Scrolling with the Page?

Site URL: http://www.emphirium.com

Can anyone link me/help me to find a code on how to unfreeze the right side of the Product Description (the excerpts and product details) to start scrolling with the images/page?

I would like to achieve the following: the stacked images to be on the left while the excerpt up top to scroll with the page, and not be fixed. Something like when you go to junglepresets.com products.

Any ideas?

Password: 20212021

It looks like you solved with this CSS?

@media screen and (min-width:768px) {
.tweak-product-basic-item-gallery-design-stacked .ProductItem-details {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}
}

Hi @tuanphan,

I've gone through each of the forum posts I can find on this subject but no luck. I'm guessing there must be a parent element that's interfering somewhere but I can't track it down. I'm trying to get all of the product details to be sticky so that a customer still has access to all the info they need while scrolling through all the images.

If you could take a look, I'd really appreciate it!

https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9

password: barnfield

Thanks!

Mark

On 3/11/2023 at 1:40 AM, markjwarman said:

Hi @tuanphan,

I've gone through each of the forum posts I can find on this subject but no luck. I'm guessing there must be a parent element that's interfering somewhere but I can't track it down. I'm trying to get all of the product details to be sticky so that a customer still has access to all the info they need while scrolling through all the images.

If you could take a look, I'd really appreciate it!

https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9

password: barnfield

Thanks!

Mark

Add to Design > Custom CSS

/* sticky product info */
@media screen and (min-width:992px) {
.pdp-form-wrapper.hidden-sm-down {
    position: fixed;
    top: 80px;
    left: 70%;
}
section.ProductItem-additional {
    z-index: 99999999;
    position: relative;
    background-color: #38383b;
}
footer.sections section, footer.sections {
    z-index: 9999999 !important;
    background-color: #0000 !important;
}
}

As always - your work is fantastic and super fast @tuanphan, thank you!

Because I have an accordion block within the sidebar, when the viewport is vertically limited, information can get cut off when it's expanded. If you open up the tab for 'Payment' I've added in some dummy text to show you what I mean.

Essentially, I need the sticky sidebar to allow for scrolling when the content is longer than the screen.

I've found 2 potential solutions but can't wrap my head around applying it within Squarespace. Could you please take a look for me?

https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/

http://jsfiddle.net/poi33/ffymzm5e/

Many thanks!

Mark

On 3/14/2023 at 5:45 PM, markjwarman said:

As always - your work is fantastic and super fast @tuanphan, thank you!

Because I have an accordion block within the sidebar, when the viewport is vertically limited, information can get cut off when it's expanded. If you open up the tab for 'Payment' I've added in some dummy text to show you what I mean.

Essentially, I need the sticky sidebar to allow for scrolling when the content is longer than the screen.

I've found 2 potential solutions but can't wrap my head around applying it within Squarespace. Could you please take a look for me?

https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/

http://jsfiddle.net/poi33/ffymzm5e/

Many thanks!

Mark

Hi,

Can you take a screenshot of problem?

Hey @tuanphan,

I've attached a video - you'll see that everything looks great but when I expand the accordion, the content goes off screen.

I've found two solutions that almost work.

This is one:

JS

$(function() {

    var $window = $(window);
    var lastScrollTop = $window.scrollTop();
    var wasScrollingDown = true;

    var $sidebar = $(".pdp-form-wrapper.hidden-sm-down");
    if ($sidebar.length > 0) {

        var initialSidebarTop = $sidebar.position().top;

        $window.scroll(function(event) {

            var windowHeight = $window.height();
            var sidebarHeight = $sidebar.outerHeight();

            var scrollTop = $window.scrollTop();
            var scrollBottom = scrollTop + windowHeight;

            var sidebarTop = $sidebar.position().top;
            var sidebarBottom = sidebarTop + sidebarHeight;

            var heightDelta = Math.abs(windowHeight - sidebarHeight);
            var scrollDelta = lastScrollTop - scrollTop;

            var isScrollingDown = (scrollTop > lastScrollTop);
            var isWindowLarger = (windowHeight > sidebarHeight);

            if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
                $sidebar.addClass('fixed');
            } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
                $sidebar.removeClass('fixed');
            }

            var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
            var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

            if (dragBottomDown) {
                if (isWindowLarger) {
                    $sidebar.css('top', 0);
                } else {
                    $sidebar.css('top', -heightDelta);
                }
            } else if (dragTopUp) {
                $sidebar.css('top', 0);
            } else if ($sidebar.hasClass('fixed')) {
                var currentTop = parseInt($sidebar.css('top'), 10);
                
                var minTop = -heightDelta;
                var scrolledTop = currentTop + scrollDelta;
                
                var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
                var newTop = (isPageAtBottom) ? minTop : scrolledTop;
                
                $sidebar.css('top', newTop);
            }

            lastScrollTop = scrollTop;
            wasScrollingDown = isScrollingDown;
        });
    }
});

CSS

.pdp-form-wrapper.hidden-sm-down {
    position: fixed;

}

But that makes the sidebar jump up or down the screen suddenly when scrolling.

And the other is this but as you scroll further on the page the sidebar moves different amounts and when you scroll back up to the top of the page, the sidebar ends up in the wrong place vertically. 

So sorry - really hard to explain and the upload limits for attachments won't let me share more videos.

JS

$(function () {
    var element = $('.pdp-form-wrapper.hidden-sm-down');
    var originalY = element.offset().top;
    var lastOffset = $(document).scrollTop();
    var diffToBottom = element.height() - $(window).height();

    $(window).on('scroll', function (event) {
        var scrollTop = $(window).scrollTop();        
        var currentOffset = $(document).scrollTop();
        var isScrollingDown = currentOffset > lastOffset;

        if (scrollTop > (diffToBottom + element.height())) {
            if (!element.hasClass('relative')) {
                element.css('top', scrollTop - (originalY + diffToBottom) + 'px');
                element.addClass('relative');
            }

            if (isScrollingDown) {
                var newTop = scrollTop < lastOffset ? 0 : scrollTop - (originalY + diffToBottom);
            }
            else if (scrollTop < element.offset().top) {
                var newTop = scrollTop - (originalY);
            }

            element.stop(false, false).animate({
                top: newTop
            }, 300);
        }
        else {
            if (scrollTop < originalY) {
                element.removeClass('relative');
            }

            element.stop(false, false).animate({
                top: scrollTop - (originalY)
            }, 300);
        }

        lastOffset = currentOffset;
    });
});

CSS

.relative {
    position: relative;
}

Thanks,

Mark