Sticky Stopper jQuery Plugin

Developer
Tcmulder
Size
4,936 Kb
Views
87,032
  1. Sticky Stopper jQuery Plugin Previews
  2. Sticky Stopper jQuery Plugin HTML Codes
  3. Sticky Stopper jQuery Plugin CSS Codes
  4. Sticky Stopper jQuery Plugin JS Codes

How do I make an sticky stopper jquery plugin?

Here's a sticky CTA idea: - The CTA's not in view initially. - Once it scrolls into view, it becomes fixed to the bottom of the window.. What is a sticky stopper jquery plugin? How do you make a sticky stopper jquery plugin? This script and codes were developed by Tcmulder on 05 August 2022, Friday.

Sticky Stopper jQuery Plugin Previews
IQ Test

Sticky Stopper jQuery Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Stopper jQuery Plugin</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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="wrap-all-the-things"> <header class="main-head"> <h1>Header</h1> <nav>Home | About | Portfolio | Contact</nav> </header> <section class="main-torso"> <article class="main-torso__group main-torso__group--margin-bottom"> <div class="main-torso__inner"> <h2>Scroll Down</h2> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> </div> </article> <article class="main-torso__group main-torso__group--margin-bottom"> <div class="main-torso__inner"> <h2>Keep Scrolling</h2> <p>Pellentesque ut neque. Etiam sit amet orci eget eros faucibus tincidunt. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Cras varius. Nam at tortor in tellus interdum sagittis.</p> <p>Phasellus ullamcorper ipsum rutrum nunc. Etiam feugiat lorem non metus. In hac habitasse platea dictumst. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Curabitur suscipit suscipit tellus.</p> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> </div> </article> <article class="main-torso__group"> <div class="main-torso__inner"> <h2>Almost There</h2> <h3><em>There's a sticky section just under this one that will become fixed to the bottom of the screen once it's fully in view.</em></h3> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> </div> </article> <article id="js-foot-cta" class="main-torso__group foot-cta"> <a href="javascript:void(0);" class="foot-cta__link">Sticky Stopper</a> </article> <article class="main-torso__group"> <div class="main-torso__inner"> <h2>But Wait: There's More</h2> <h3>Keep on scrolling...</h3> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> </div> </article> <article class="main-torso__group"> <div class="main-torso__inner"> <h2>Check Out the Footer</h2> <h3><em>Once it comes into view, the sticky section becomes fixed to the top of the footer.</em></h3> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> <p>Pellentesque posuere. Integer tincidunt. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Sed libero. Etiam feugiat lorem non metus.</p> <p>Etiam iaculis nunc ac metus. Praesent vestibulum dapibus nibh. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Morbi ac felis. Nam eget dui.</p> </div> </article> </section> <footer id="js-foot" class="main-foot"> <p><strong>Footer</strong></p> <p>Pretty Cool, Huh?</p> <nav>Home | About | Portfolio | Contact</nav> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky Stopper jQuery Plugin - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway:400,900);
/*------------------------------------*\ ::Page Footer CTA Template Part
\*------------------------------------*/
.foot-cta { position: relative; z-index: 50; height: 5em; text-align: center;
}
.foot-cta--sticky .foot-cta__link { position: fixed; bottom: 0;
}
.foot-cta__link { position: absolute; left: 0; width: 100%; height: 5em; background-color: rgba(109, 159, 148, 0.8); line-height: 2.5; color: #FCFEBE; text-decoration: none; -webkit-transition: 300ms; transition: 300ms;
}
.foot-cta__link:hover { background-color: rgba(252, 254, 190, 0.8); color: #C9AF59;
}
html, body { height: 99.99999%;
}
.wrap-all-the-things { display: table; table-layout: fixed; height: 100%; width: 100%; background-color: #215D6E; color: #FCFEBE; font-family: "Raleway", "Trebuchet MS", sans-serif;
}
.main-head, .main-torso, .main-foot, .foot-cta__spacer { display: table-row;
}
.main-head { background-color: #387179; text-align: center;
}
.main-head:after { content: ""; background-color: #6D9F94; height: .2em; width: 100%; margin-top: 5em; display: block;
}
.main-torso { height: auto; background-color: #215D6E;
}
.main-torso p { color: #6D9F94;
}
.main-torso h3 { font-weight: 100;
}
.main-foot { background-color: #387179; text-align: center;
}
.main-foot:before { content: ""; background-color: #6D9F94; height: .2em; width: 100%; margin-bottom: 5em; display: block;
}
[class*="__inner"] { max-width: 1140px; margin-left: auto; margin-right: auto; padding-left: 1em; padding-right: 1em;
}
[class*="--margin-bottom"] { margin-bottom: 5em;
}

Sticky Stopper jQuery Plugin - Script Codes JS Codes

//prepost jquery plugin
(function($) { $.fn.stickystop = function(options) { var stick = { //prepare to store jquery objects win: null, cta: null, stopper: null, //to store timer timer: null, //to store options //options passed into the plugin opt: $.extend({ //the inner element inner: '> :first-child', //the stopper element stopper: '.stickystop__stopper' }, options), //initialize the sticky cta init: function(stickEl){ stick.cta = stickEl; if(stick.cta.length > 0){ //cache variables stick.win = $(window); stick.inner = stick.cta.find(stick.opt.inner); stick.stopper = $(stick.opt.stopper); stick.stopper.before('<div class="foot-cta foot-cta__spacer"><!-- spacer for sticky cta --></div>'); //work on scroll stick.win.on('scroll',function(){ //be at least a little more performant clearTimeout(stick.timer); stick.timer = setTimeout(stick.move, 5); }); } }, //when the user scrolls move: function(){ // get the top var winTop = stick.win.scrollTop(); // get the bottom var winBot = winTop + stick.win.height(); // get the cta top var ctaTop = stick.cta.offset().top; // get the cta bottom var ctaBot = ctaTop + stick.cta.height(); // get the stopper top var stopperTop = stick.stopper.offset().top; // if the cta's bottom is in view and the top of the stopper isn't if(ctaBot <= winBot && winBot <= stopperTop){ // make the cta sticky (to the bottom) stick.cta.addClass('foot-cta--sticky'); stick.inner.css('top', 'auto'); // if the top of the footer is in view } else if (winBot > stopperTop){ // absolute position the cta above the stopper stick.cta.removeClass('foot-cta--sticky'); stick.inner.css('top', (stopperTop - ctaBot)); // if the bottom of the cta is not in view } else { // absolute position the cta at the top of it's origin stick.cta.removeClass('foot-cta--sticky'); stick.inner.css('top', 0); } } }; //initialize the slider for the object passed in stick.init(this); };
}(jQuery));
//call prepostslider on an element (all options set to default)
jQuery(function($){ $('#js-foot-cta').stickystop({ //inner: '.foot-cta__link', //defaults to '> :first-child' stopper: '#js-foot' //defaults to .stickystop__stopper });
});
Sticky Stopper jQuery Plugin - Script Codes
Sticky Stopper jQuery Plugin - Script Codes
Home Page Home
Developer Tcmulder
Username tcmulder
Uploaded August 05, 2022
Rating 3
Size 4,936 Kb
Views 87,032
Do you need developer help for Sticky Stopper jQuery Plugin?

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!

Tcmulder (tcmulder) Script Codes
Name
PrePost Slider jQuery Plugin
Unfinished sunrise
Jeet
Toggle-to-Menu Concept
Nav Back There
Half and Half
Zenman Intro Loader
CSS-Only Slideshow
Zoom
Cartoon Bomb
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!