Stuck, with sticky sequence scroll coding, can some have a look and explain?

HTML-CSS
1

Can someone have a look with me and explain why my sticky scroll sequence is not working? I have been at it for more than a week, i have managed to get the sequence to work on scroll, but the sticky part i just cant seem to work out!! As i cant attach files to this pos, please let me know if you want to have a look and ill send you the files. Fingers crossed

2

Copy and paste your code here with three ``` back ticks, before and after your code in a separate line.

3

Hi Hasan, and thanks for pointing me in the right direction. So here goes (ill paste the index.html, style.css and script.js). Off course im hoping to get the right code, but it would be really great if someone could also explain why / where im going wrong or am making mistakes:

<html>
<head>
   <meta charset="utf-8">
   <meta name="keywords" content="">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <link rel="canonical" href="http://antihero-agency.com/">
   <meta name="robots" content="index, follow">
   <link rel="shortcut icon" type="image/png" href="favicon.png">
   
   <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css?2331">
   <link rel="stylesheet" type="text/css" href="style.css?9289">
   
   <title>Home</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   
   <!-- Analytics -->
   <!-- Analytics END -->
</head>
<body>

<!-- Preloader -->
<div id="page-loading-blocs-notifaction" class="page-preloader"></div>
<!-- Preloader END -->

<!-- Main container -->
<div class="page-container">
   
   <!-- bloc-0 -->
   <section id="bloc-0">
       <div class="height">
           <div class="row">
               <div class="col q-1 align-self-center text-center">
                   <img id="img-1" src="img/Jacket Sweat-07.png" class="img-fluid mx-auto d-block img-1" alt="Jacket Sweat-07" width="700" height="700">
                   <img id="img-2" src="img/mountain-02.png" class="img-fluid mx-auto d-block img-2" alt="mountain-02" width="700" height="700">
               </div>
           </div>
       </div>
   </section>
   <!-- bloc-0 END -->
   
   <div class="bloc l-bloc full-width-bloc bg-center" id="bloc-1">
       <div class="container bloc-xxl height">
           <div class="row">
               <div class="Column.sticky-image align-self-center text-center">
                   <picture><source type="image/jpg" srcset="img/frame_01.jpg"><img src="img/frame_01.jpg" class="img-fluid mx-auto d-block sticky-image-element" alt="frame_01" width="700" height="700"></picture>
               </div>
           </div>
       </div>
   </div>  
   <!-- bloc-1 END -->

   <!-- ScrollToTop Button -->
   <button aria-label="Scroll to top button" class="bloc-button btn btn-d scrollToTop" onclick="scrollToTarget('1',this)"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32"><path class="scroll-to-top-btn-icon" d="M30,22.656l-14-13-14,13"/></svg></button>
   <!-- ScrollToTop Button END-->

</div>
<!-- Main container END -->

<!-- Additional JS -->
<script src="./js/bootstrap.bundle.min.js?4923"></script>
<script src="./js/blocs.min.js?398"></script>
<script src="./js/lazysizes.min.js" defer></script>
<script src="./js/script.js"></script> <!-- Included script.js -->
<!-- Additional JS END -->
<script>
   document.addEventListener('DOMContentLoaded', function () {
       const image = document.querySelector('.sticky-image-element');
       const totalFrames = 46;
       let containerTopOffset = document.getElementById('bloc-1').offsetTop;
       const containerHeight = document.getElementById('bloc-1').offsetHeight;

       const changeRate = containerHeight / totalFrames;

       window.addEventListener('scroll', () => {
           const scrollPosition = window.pageYOffset - containerTopOffset;

           let frameNumber = Math.min(
             totalFrames,
             Math.max(1, Math.ceil(scrollPosition / changeRate))
           );

           let frameSrc = `img/frame_${String(frameNumber).padStart(2, '0')}.jpg`;
           image.src = frameSrc;
       });
   });
</script>
</body>
</html>```

```/*-----------------------------------------------------------------------------------
   ANTI HERO AGENCY
   Author: ANTI HERO AGENCY
   Version: 1.0
   Built by: ANTI HERO AGENCY
-----------------------------------------------------------------------------------*/
body{
   margin:0;
   padding:0;
   background:#000000;
   overflow-x:hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.page-container{overflow: hidden;} /* Prevents unwanted scroll space when scroll FX used. */
a,button{transition: background .3s ease-in-out;outline: none!important;} /* Prevent blue selection glow on Chrome and Safari */
a:hover{text-decoration: none; cursor:pointer;}
.scroll-fx-lock-init {
   position: fixed!important;
   top: 0;
   bottom: 0;
   left: 0; /* Semicolon added, colon before value */
   right: 0; /* Semicolon added, colon before value */
   z-index: 20; /* Extra colon removed */
 } /* ScrollFX Lock */
.blocs-grid-container{display: grid!important;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;column-gap: 1.5rem;row-gap: 1.5rem;} /* CSS Grid */
nav .dropdown-menu .nav-link{color:rgba(0,0,0,0.6)!important;} /* Maintain Downdown Menu Link Color in Navigation */
[data-bs-theme="dark"] nav .dropdown-menu .nav-link{color:var(--bs-dropdown-link-color)!important;} /* Maintain Downdown Menu Link Color in Navigation in Darkmode */


/* Preloader */

.page-preloader{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url("img/pageload-spinner.gif") no-repeat center center;animation-name: preloader-fade;animation-delay: 2s;animation-duration: 0.5s;animation-fill-mode: both;}
.preloader-complete{animation-delay:0.1s;}
@keyframes preloader-fade {0% {opacity: 1;visibility: visible;}100% {opacity: 0;visibility: hidden;}}

/* = Blocs
-------------------------------------------------------------- */

.bloc{
   width:100%;
   clear:both;
   background: 50% 50% no-repeat;
   padding:0 20px;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   position:relative;
   display:flex;
}
.bloc .container{
   padding-left:0;
   padding-right:0;
   position:relative;
}


/* Sizes */

.bloc-xxl{
   padding:200px 20px;
}
.bloc-lg{
   padding:100px 20px;
}

/* = Full Width Blocs 
-------------------------------------------------------------- */

.full-width-bloc{
   padding-left:0;
   padding-right:0;
}
.full-width-bloc .row{
   margin-left:0;
   margin-right:0;
}
.full-width-bloc .container{
   width:100%;
   max-width:100%!important;
}
.full-width-bloc .carousel img{
   width:100%;
   height:auto;
}


/* Background Styles */

.bg-center,.bg-l-edge,.bg-r-edge,.bg-t-edge,.bg-b-edge,.bg-tl-edge,.bg-bl-edge,.bg-tr-edge,.bg-br-edge,.bg-repeat{
   -webkit-background-size: auto!important;
   -moz-background-size: auto!important;
   -o-background-size: auto!important;
   background-size: auto!important;
}
.bg-center{
   -webkit-background-size: cover;
background-size: cover;
}


/* Light theme */

.d-bloc .card,.l-bloc{
   color:rgba(0,0,0,.5);
}
.d-bloc .card button:hover,.l-bloc button:hover{
   color:rgba(0,0,0,.7);
}
.l-bloc .icon-round,.l-bloc .icon-square,.l-bloc .icon-rounded,.l-bloc .icon-semi-rounded-a,.l-bloc .icon-semi-rounded-b{
   border-color:rgba(0,0,0,.7);
}
.d-bloc .card .divider-h span,.l-bloc .divider-h span{
   border-color:rgba(0,0,0,.1);
}
.d-bloc .card .a-btn,.l-bloc .a-btn,.l-bloc .navbar a,.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl, .l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a, .l-bloc p a{
   color:rgba(0,0,0,.6);
}
.d-bloc .card .a-btn:hover,.l-bloc .a-btn:hover,.l-bloc .navbar a:hover, .l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl, .l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover, .l-bloc p a:hover{
   color:rgba(0,0,0,1);
}
.l-bloc .navbar-toggle .icon-bar{
   color:rgba(0,0,0,.6);
}
.d-bloc .card .btn-wire,.d-bloc .card .btn-wire:hover,.l-bloc .btn-wire,.l-bloc .btn-wire:hover{
   color:rgba(0,0,0,.7);
   border-color:rgba(0,0,0,.3);
}


/* = NavBar
-------------------------------------------------------------- */

/* Navbar Icon */
.svg-menu-icon{
   fill: none;
   stroke: rgba(0,0,0,0.5);
   stroke-width: 2px;
   fill-rule: evenodd;
}
.navbar-dark .svg-menu-icon{
   stroke: rgba(255,255,255,0.5);
}
.menu-icon-thin-bars{
   stroke-width: 1px;
}
.menu-icon-thick-bars{
   stroke-width: 5px;
}
.menu-icon-rounded-bars{
   stroke-width: 3px;
   stroke-linecap: round;
}
.menu-icon-filled{
   fill: rgba(0,0,0,0.5);
   stroke-width: 0px;
}
.navbar-dark .menu-icon-filled{
   fill: rgba(255,255,255,0.5);
}
.navbar-toggler-icon{
   background: none!important;
   pointer-events: none;
   width: 33px;
   height: 33px;
}
/* Handle Multi Level Navigation */
.dropdown-menu .dropdown-menu{
   border:none}
@media (min-width:576px){
   
.navbar-expand-sm .dropdown-menu .dropdown-menu{
   border:1px solid rgba(0,0,0,.15);
   position:absolute;
   left:100%;
   top:-7px}.navbar-expand-sm .dropdown-menu .submenu-left{
   right:100%;
   left:auto}}@media (min-width:768px){
   .navbar-expand-md .dropdown-menu .dropdown-menu{
   border:1px solid rgba(0,0,0,.15);
   border:1px solid rgba(0,0,0,.15);
   position:absolute;
   left:100%;
   top:-7px}.navbar-expand-md .dropdown-menu .submenu-left{
   right:100%;
   left:auto}}@media (min-width:992px){
   .navbar-expand-lg .dropdown-menu .dropdown-menu{
   border:1px solid rgba(0,0,0,.15);
   position:absolute;
   left:100%;
   top:-7px}.navbar-expand-lg .dropdown-menu .submenu-left{
   right:100%;
   left:auto}
}

/* = Buttons
-------------------------------------------------------------- */

.btn-d,.btn-d:hover,.btn-d:focus{
   color:#FFF;
   background:rgba(0,0,0,.3);
}

/* Prevent ugly blue glow on chrome and safari */
button{
   outline: none!important;
}






.card-sq, .card-sq .card-header, .card-sq .card-footer{
   border-radius:0;
}
.card-rd{
   border-radius:30px;
}
.card-rd .card-header{
   border-radius:29px 29px 0 0;
}
.card-rd .card-footer{
   border-radius:0 0 29px 29px;
}
/* = Masonary
-------------------------------------------------------------- */
.card-columns .card {
   margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
   .card-columns {
   -webkit-column-count: 3;
   -moz-column-count: 3;
   column-count: 3;
   -webkit-column-gap: 1.25rem;
   -moz-column-gap: 1.25rem;
   column-gap: 1.25rem;
   orphans: 1;
   widows: 1;
}
.card-columns .card {
   display: inline-block;
   width: 100%;
}
}




/* ScrollToTop button */

.scrollToTop{
   width:36px;
   height:36px;
   padding:5px;
   position:fixed;
   bottom:20px;
   right:20px;
   opacity:0;
   z-index:999;
   transition: all .3s ease-in-out;
   pointer-events:none;
}
.showScrollTop{
   opacity: 1;
   pointer-events:all;
}
.scroll-to-top-btn-icon{
   fill: none;
   stroke: #fff;
   stroke-width: 2px;
   fill-rule: evenodd;
   stroke-linecap:round;
}

/* = Custom Styling
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6,p,label,.btn,a{
   font-family:"Helvetica";
}
.container{
   max-width:576px;
}

/* = Colour
-------------------------------------------------------------- */

/* Swatch Variables */
:root {
   --main-color: #3498db;
   --padding: 16px;
 }  



/* Bloc image backgrounds */



/* = Additional CSS
-------------------------------------------------------------- */
.image-stack-container {
   position: relative;
   height: 100vh; /* Full height of the viewport */
   overflow-y: scroll; /* Enables vertical scrolling */
   scroll-snap-type: y mandatory; /* Optional: Enhances the scrolling experience */
}

.image-stack-container .row {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   scroll-snap-align: start; /* Optional: Works with scroll-snap-type */
}

/* Ensure images are centered and cover their area */
.image-stack-container .row .col div {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

.image-stack-container .row .col div picture img {
   max-height: 100%;
   object-fit: cover; /* Adjust as needed */
}

.imageholder {
   /* Example styles for the image holder */
   display: flex;
   justify-content: center;
   align-items: center;
   /* Add any other styling you need here */
}


/* = Bloc Padding Multi Breakpoint
-------------------------------------------------------------- */

@media (min-width: 576px) {
   .bloc-xxl-sm{padding:200px 20px;}
   .bloc-xl-sm{padding:150px 20px;}
   .bloc-lg-sm{padding:100px 20px;}
   .bloc-md-sm{padding:50px 20px;}
   .bloc-sm-sm{padding:20px;}
   .bloc-no-padding-sm{padding:0 20px;}
}
@media (min-width: 768px) {
   .bloc-xxl-md{padding:200px 20px;}
   .bloc-xl-md{padding:150px 20px;}
   .bloc-lg-md{padding:100px 20px;}
   .bloc-md-md{padding:50px 20px;}
   .bloc-sm-md{padding:20px 20px;}
   .bloc-no-padding-md{padding:0 20px;}
}
@media (min-width: 992px) {
   .bloc-xxl-lg{padding:200px 20px;}
   .bloc-xl-lg{padding:150px 20px;}
   .bloc-lg-lg{padding:100px 20px;}
   .bloc-md-lg{padding:50px 20px;}
   .bloc-sm-lg{padding:20px;}
   .bloc-no-padding-lg{padding:0 20px;}
}


/* = Mobile adjustments 
-------------------------------------------------------------- */
@media (max-width: 1024px)
{
   .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container{
       padding-left: 0; 
       padding-right: 0;  
   }
}
@media (max-width: 991px)
{
   .container{width:100%;}
   .bloc{padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);} /* iPhone X Notch Support*/
   .bloc-group, .bloc-group .bloc{display:block;width:100%;}
}
@media (max-width: 767px)
{
   .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{
       padding-left:0;padding-right:0;
   }
   .btn-dwn{
      display:none; 
   }
   .voffset{
       margin-top:5px;
   }
   .voffset-md{
       margin-top:20px;
   }
   .voffset-lg{
       margin-top:30px;
   }
   form{
       padding:5px;
   }
   .close-lightbox{
       display:inline-block;
   }
   .blocsapp-device-iphone5{
      background-size: 216px 425px;
      padding-top:60px;
      width:216px;
      height:425px;
   }
   .blocsapp-device-iphone5 img{
      width: 180px;
      height: 320px;
   }
}
@media (max-width: 575px){
   .img-padding-left{
   	background-size:length;
   }
   .--animation:-imagesequence-10s-linear-infinite{
   	width:100%;
   	z-index:1;
   	background-position:center center;
   	position:absolute;
   	margin-top:100%;
   	margin-right:100%;
   	margin-left:100px;
   	grid-template-columns:0;
   	align-items:center;
   	flex-direction:column;
   	justify-content:center;
   }
   .--animation:-imagesequence-10s-linear-infinite:active{
   	background-position:center center;
   	background-size:100% auto;
   	background-attachment:scroll;
   }
   .img-padding-top{
   	z-index:1;
   	padding-top:42px;
   }
   .sticky-image-container {
   	position: sticky;
   	top: 0;
   	z-index: 10;
     }	  
   .scrollfx{
   	position:sticky;
   }
   .imageholder{
   	position:fixed;
   }
   .sticky-image {
   	position: -webkit-sticky; /* For Safari */
   	position: sticky;
   	top: 0; /* Adjust this value based on your needs */
   	z-index: 10; /* To ensure it stacks on top of other content if necessary */
   	opacity: 0; /* Initially hidden */
   	transition: opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) ease-in-out;
     }
     
     /* Show image when scrolled past a certain point */
     .sticky-image.active {
   	opacity: 1;
     }
     
     /* Adjust based on your container element */
     .container.sticky {
   	position: relative; /* Make container aware of absolute positioning */
   	height: [desired container height in pixels]; /* Adjust as needed */
     }	  
   .sticky-image-element{
   	text-align:center;
   	background-position:center center;
   	align-items:center;
   	align-content:center;
   }
   
}
.column.sticky-image {
 /* Replace .column with the actual selector for your image container */
 text-align: center;
}

/* Alternatively, style the image element itself: */
#sticky-image-element {
 margin: 0 auto;```
}

```// Ensure this selector matches the actual class used in your HTML for the sticky image
const stickyImage = document.querySelector('.sticky-image');
const triggerPoint = window.innerHeight / 2; // Adjust trigger point as needed

window.addEventListener('scroll', function() {
   if (window.scrollY > triggerPoint) {
       stickyImage.classList.add('active');
       document.body.classList.add('scrolled');
   } else {
       stickyImage.classList.remove('active');
       document.body.classList.remove('scrolled');
   }
});```
4

Hi Hasan,

Hope all is well? Did you have any chance looking at the code i posted earlier? As you may have noticed, but after trying for almost 2 weeks im getting quite desperate, but not yet ready to give up… ha ha.

Best,
Quince

5

I suggest you to paste your whole code with your issue in chatgpt. You can find better solution. I am not expert in web designing. I just able to answer with basics .
@quinos

6

The above is not the best suggestion. ChatGPT can be wildly inaccurate, and can cause more issues to your code than be helpful. Chatgpt should really never be considered a solution to any coding problems, unless it can be checked over to see if it’s actually right or not.

I will try to look over it if I have more time, but at the moment I may not be able to get to it today. Hopefully someone else who has experience can provide better help

7

I have tried both Chat and Bard, both without too much success unfortunately. @Cody: you have no idea how happy that would make me… I’ve have only just kinda started with coding and up until getting the sequence scroll to work it was rather enjoyable, but have been banging my head for almost two weeks now to get it to work with a sticky element with no luck, my enjoyment is fading quickly… ha ha

8

Hi Cody,

my post doesnt seem to get a lot of traction unfortunately! Hope im not being inappropriate, but any chance i could persuade you to have a quick look perhaps?

If not no problem off course, ill have to get a bit more creative and see if i can find another way to resolve.

In any case thanks!

Best,
Quince

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.