Jump to content

markjwarman

Circle Member
  • Posts

    8
  • Joined

  • Last visited

markjwarman's Achievements

  1. 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
  2. Hey @tuanphan Yes - that's what I'd like the page to look like. Thanks, Mark
  3. Hi @tuanphan - was there a solution to this? I tried to hack my way around this by only uploading 1 image into the main product details section and then adding a gallery into the additional info block but that caused an issue on mobile as the product page uses the images from the main product details section to create a carousel. It also causes an issue with the sticky sidebar on desktop as it gets covered up as the gallery scrolls into view. https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9 password: barnfield Thanks! Mark
  4. 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
  5. 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
  6. Hi @codeandtonic Thanks for the above - I've given it a shot and although the script does redirect to the contact page, it looks like the default action of attempting to add the product to the cart still gets triggered. Any chance you could take a look for me? https://tarpon-glockenspiel-p4x5.squarespace.com/shop/p/lawrence-jacket-zczh9 password: barnfield Thanks! Mark
  7. Thanks for the speedy reply Paul. I'd seen you mention Trunk on another post and had a quick look. I couldn't immediately see that it would be the answer for this specific situation but I'll sign up to a trial now and give it a shot. If all works out, I'll update this post. Thanks again! Mark
  8. Hi all, I'll soon be opening up preorders for my first jacket. The overall quantity will be limited to 300 units but this could be spread out across any number of either Small, Medium, Large, XL or XXL. I won't know until I open up preorders to the public. In an ideal world, I would set 300 as an overall quantity and as the orders get placed in each size, Squarespace would remove them from this number. As far as I can tell, I can only limit the inventory at the variant level. I need the variant inventory to be flexible but the overall inventory for the product to be fixed. Does that make sense? I have a feeling this won't be possible in Squarespace but I'm struggling to figure out the right search terms to see if it's possible on any other platform. Many thanks! Mark
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.