Floating Product image

Developer
Lahvjal
Size
2,443 Kb
Views
46,552
  1. Floating Product image Previews
  2. Floating Product image HTML Codes
  3. Floating Product image CSS Codes
  4. Floating Product image JS Codes

How do I make an floating product image?

What is a floating product image? How do you make a floating product image? This script and codes were developed by Lahvjal on 24 August 2022, Wednesday.

Floating Product image Previews
IQ Test

Floating Product image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>floating Product image</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="space"></div>
<div class="row"> <div class="product-img-box"></div> <div class="desc" id="desc"></div> <div class="clear"></div>
</div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Floating Product image - Script Codes CSS Codes

body { margin: 0; padding: 0; display: flex; align-items: center; flex-direction: column;
}
.row { width: 1200px; height: auto; background-color: #ccc; display: flex; position: relative;
}
.product-img-box { height: 300px; width: 50%; background-color: blue; margin-top: 0px;
}
#desc { height: 1500px; width: 50%; background-color: red;
}
.clear { clear: both;
}
.space { width: 1200px; height: 200px; background-color: orange;
}

Floating Product image - Script Codes JS Codes

jQuery(window).on('scroll', function () { var scrollTopz = jQuery(window).scrollTop(), elementOffsetz = jQuery('.row').offset().top, element2Off = jQuery('#desc').offset().top, productH = jQuery('.product-img-box').height(), descH = jQuery('#desc').height(), descBottom = (descH - productH), distancez = (element2Off - scrollTopz); if(distancez <= 0 && distancez >= (-descBottom - 1)) { jQuery('.product-img-box, #product-uses-outer').css({ 'margin-top': scrollTopz - element2Off }) } else if(distancez <= -descBottom) { jQuery('.product-img-box, #product-uses-outer').css({ 'margin-top': descBottom }) } else { jQuery('.product-img-box, #product-uses-outer').css({ 'margin-top': '0px' }) } console.log(scrollTopz, distancez, descBottom, (distancez <= -descBottom), elementOffsetz, element2Off);
})
Floating Product image - Script Codes
Floating Product image - Script Codes
Home Page Home
Developer Lahvjal
Username lahvjal
Uploaded August 24, 2022
Rating 3
Size 2,443 Kb
Views 46,552
Do you need developer help for Floating Product image?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lahvjal (lahvjal) Script Codes
Name
RMO live StyleGuide
Buttons - RMO
RMO Live Style Guide
Run script before page load
PNT Page
Blog-article-blocks
Paragraphs - RMO
24 Hour Countdown Clock Loop
Rotate wheel
Recycle Search - RMO
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!