allexanderm Posted January 6, 2022 Share Posted January 6, 2022 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 Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
markjwarman Posted March 10 Share Posted March 10 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 Link to comment
tuanphan Posted March 12 Share Posted March 12 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
markjwarman Posted March 14 Share Posted March 14 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 Link to comment
tuanphan Posted March 16 Share Posted March 16 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
markjwarman Posted March 24 Share Posted March 24 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 fixed-menu.mov Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment