I want to make the product detail into 2 Columns with images at the side and description on the other side...
I want the right side containing the detail to be sticky while scrolling and left side containing the images
Add a comment
|
2 Answers
As per your requirement i suggest set your product page layout as 1 column, set your HTML code in left (it contains Images section) & right (product details information) container.
For sticky right part i suggest go with Sticky-Kit JavaScript, below is the source code from GitHub & working demo example from jsFiddle. Kindly check below URLs.
Source Code : Sticky Kit GitHub source
Working Demo : jsfiddle working example
-
Do I need to include Jquery in my Magento theme or by default It is included Feb 27, 2020 at 13:49
-
You can use default theme's jQuery, but check that jQuery version it should be latest one and also include sticky-kit.js in your theme web directory. Feb 28, 2020 at 4:28
-
Failed to load resource: the server responded with a status of 403 (Forbidden) sticky.js:2 Uncaught ReferenceError: $ is not defined at sticky.js:2 jquery.sticky-kit.js:12 Uncaught TypeError: $ is not a function at jquery.sticky-kit.js:12 at jquery.sticky-kit.js:251 pub/static/version1582812171/frontend/Pronko/consulting/en_US/fonts.googleapis.com/css?family=Creepster:1 Failed to load resource: the server responded with a status of 403 (Forbidden) facing these errors Feb 28, 2020 at 6:30
-
That must be jQuery loading dependency issue, try to load jQuery library before sticky js. there maybe jQuery conflict issue you may face. Feb 28, 2020 at 11:45
@Nayan Baraiya, Thanks for the reference link, i exactly want this type of sticky part in my detail page. KUDOs to you.
