Combining Sticky Content and Custom JS

[middlemann]

Hi there, you shared some custom JS with me a while back that is working great, just as intended. I got to thinking though how cool it would be if it worked with the sticky content feature the theme has.

I can’t get it to work properly together. They both work great independently, but I want to try and make them work together. Would you have a look please?

<section class=" section-center mt-0 mb-0 pt-5">
					<div class="container">
						<div class="row mb-5 pb-3">
								
							<div align="center" class="card-group col-md-8 align-self-center">
								<div class="col-md-12 mb-5 mb-lg-0 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="animation-delay: 400ms;">

									<div class="card card-border card-border-bottom card-border-hover bg-color-light box-shadow-6 box-shadow-hover anim-hover-translate-top-10px transition-3ms py-1 mb-3 mt-2">
										<div align="left" class="card-body">
											<h4 class="card-title mb-3 text-6 font-weight-bold line-height-1">Play Trilogy From Your Smartphone</h4>
											<p class="card-text text-4">The Trilogy Power Pools app pools and plays the Powerball, Mega Millions and Arizona Pick lotteries, simultaneously. Every ticket and the results of every lottery draw are updated in realtime in the app.</p>
										</div>
									</div>
								</div>

								<div class="col-md-12 mb-5 mb-lg-0 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="animation-delay: 400ms;">

									<div class="card card-border card-border-bottom card-border-hover bg-color-light box-shadow-6 box-shadow-hover anim-hover-translate-top-10px transition-3ms py-1 mb-3">
										<div align="left" class="card-body">
											<h4 class="card-title mb-3 text-6 font-weight-bold line-height-1">Get Notified When You Win</h4>
											<p class="card-text text-4">Every time any pool you're in wins, the app will send a push notification to your phone. Tapping the notification launches the app so you can see the results as they happen.</p>
										</div>
									</div>
								</div>

								<div class="col-md-12 mb-5 mb-lg-0 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="animation-delay: 400ms;">

								  <div class="card card-border card-border-bottom card-border-hover bg-color-light box-shadow-6 box-shadow-hover anim-hover-translate-top-10px transition-3ms py-1 mb-3">
										<div align="left" class="card-body">
											<h4 class="card-title mb-3 text-6 font-weight-bold line-height-1">Trust and Security</h4>
											<p class="card-text text-4">Every ticket, draw, win, credit and referral is displayed in realtime and saved in the Trilogy app. Our technology is built and constantly updated using state of the art programming languages and is hosted on enterprise AWS servers. We will never spam, rent or sell your information.</p>
										</div>
									</div>
								</div>

								<div class="col-md-12 mb-5 mb-lg-0 appear-animation animated fadeInUpShorter appear-animation-visible" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400" style="animation-delay: 400ms;">

								  <div class="card card-border card-border-bottom card-border-hover bg-color-light box-shadow-6 box-shadow-hover anim-hover-translate-top-10px transition-3ms py-1 mb-3">
										<div align="left" class="card-body">
											<h4 class="card-title mb-3 text-6 font-weight-bold line-height-1">Get Even More Chances to Win</h4>
											<p class="card-text text-4">Of course we designed the app with a built-in referral program. We want you to tell your friends about us and we want to give you free credits for sharing. Members can use credits to buy shares in more pools or redeem them for cash.</p>
										</div>
									</div>
								</div>

							</div>
							
							<div align="center" class="col-md-4 align-self-center">
								<div class="pin-wrapper" style="height: auto;">
									<aside class="sidebar" id="sidebar" data-plugin-sticky="" data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}" style="width: 300px;">

										<div id="card-image">
											<img src="images/mockups/home-screen-on-iphone.jpg" width="300" height="auto" alt="" /> 
											<img src="images/mockups/win-notification-on-iphone.jpg" width="300" height="auto" alt="" />
											<img src="images/mockups/credits-on-iphone.jpg" width="300" height="auto" alt="" />
											<img src="images/mockups/referrals-on-iphone.jpg" width="300" height="auto" alt="" />
										</div>

									</aside>
								</div>
							</div>

						</div>
					</div>
				</div>

---

[Support]

Hello, sorry but unfortunatelly we don’t have an example of that at the moment and it requires extra customization to work toghether, which is not included in the support license.

Thanks.

---

[Author]

Posts