Skip to content

Instantly share code, notes, and snippets.

@stanwmusic
Created October 1, 2023 17:55
Show Gist options
  • Save stanwmusic/80c05f87f377fd19f7b4a49cd19c0f1d to your computer and use it in GitHub Desktop.
Save stanwmusic/80c05f87f377fd19f7b4a49cd19c0f1d to your computer and use it in GitHub Desktop.
On page Scroll V 1.7
<div class="content">
<section class="header">
<h1><u>🖥️ - ON PAGE SCROLL PLUGIN V 1.7 - 🖥️ </u></h1>
<b><p>Now the height of each section can be set to your value and not <br>min-height: 'window.height()'</p></b>
<p>This is the Header (.header)</p>
<p>You can Enable/Disable it by setting the option like this:</p>
<p><b>'header' : 'your jQ selector'</b></p>
</section>
<section class="section">
<div>
<h1><u>This is the first Section (.section)</u></h1><br>
<p>To make this Plugin work, you must:</p>
<p>1. Set your section selector.. like this: <b>'page' : 'your jQ selector'</b></p>
<p>2. And wrap your elements with a <b>&lt;div&gt;</b></p>
<p>And you can also set the 'Page Name' for the sticky Menu, Like This:</p>
<p><b>'pageName' : ['Section 1', 'The Other Section', '...']</b></p>
</div>
</section>
<section class="section">
<div>
<h1><u>To enable the 'Sticky Menu'</u></h1><p>do it Like This:</p>
<p><b>'sticky' : true</b></p>
<p>By default it's set to 'false'</p>
<p>You can use a <b><u>custom class</u></b> for the 'Sticky Menu' using this option:</p>
<p><b>'stickyCls' : 'your className'</b><i> (not .class but class)</i></p>
</div>
</section>
<section class="section">
<div>
<h1><u>The default easing is set to 'linear'..</u></h1>
<p>But you can use the easing function you want.. Like This: (work with jQueryUI)</p>
<p><b>'easing' : 'your easing function'</b></p>
</div>
</section>
<section class="section">
<div>
<h1><u>You can set a threshold and an animation time</u></h1><p>Like This:</p>
<p><b>'threshold' : 150 (or whatever you want)</b></p>
<p><b>'time' : 1000 (or whatever you want)</b></p>
<p>By default these options are set to 150 for the threshold and 1000 for the animation time.</p>
</div>
</section>
</div>
$(document).ready(function() {
// START OF THE PLUGIN //
$.fn.page = function(options){
var default_o = {
'threshold' : 140,
'time' : 1010,
'easing' : 'linear',
'page' : null,
'header' : null,
'before' : null,
'sticky' : false,
'stickyCls' : null,
'pageName' : []
};
var o = $.extend(default_o, options);
var elm = {};
var stickyH;
function __init(){
$(o.page).first().addClass('actived');
}
function toNext(){
var $this = $('.actived');
var nxt = $this.next(o.page);
if(nxt.length > 0){
var offset = nxt.offset().top;
if(o.sticky){ offset = offset-parseInt(stickyH,10); }
if(typeof(o.before) === 'function'){o.before();}
$('body, html').animate({scrollTop: offset},{
start : function(){ $this.removeClass('actived'); },
easing : o.easing,
duration : o.time,
complete : function(){
nxt.addClass('actived');
var color = $('.actived').prev(o.page).css('background');
if((o.sticky) && (!o.stickyCls)){
elm.wraper.animate({'background':color}, o.time);
}
},
});
}
}
function toPrev(){
var color;
var $this = $('.actived');
var prv = $this.prev(o.page);
if(prv.length > 0){
var offset = prv.offset().top;
if(o.sticky){ offset = offset-parseInt(stickyH,10); }
if(typeof(o.before) === 'function'){o.before();}
$('body, html').animate({scrollTop: offset},{
start : function(){ $this.removeClass('actived'); },
easing : o.easing,
duration : o.time,
complete : function(){
prv.addClass('actived');
if($('.actived').prev(o.page).length > 0){
color = $('.actived').prev(o.page).css('background');
if((o.sticky) && (!o.stickyCls)){
elm.wraper.animate({'background':color}, o.time);
}
}else{
color = $(o.page).last().css('background');
if((o.sticky) && (!o.stickyCls)){
elm.wraper.animate({'background':color}, o.time/4);
}
}
},
});
}
}
function header(){
if(($(o.header).css('padding') === '0px')){ $(o.header).css({'padding': '1px'}); }
$(o.header).attr('style','margin-top: 0px !important; margin-bottom :'+parseInt(stickyH,10)+'px !important;');
}
function sticky(){
var newOff;
var iniCol;
if(!o.stickyCls){ iniCol = $(o.page).last().css('background'); }
$('head').append('<style>.sliding-middle-out { display: inline-block; position: relative; padding-bottom: 3px; } .sliding-middle-out:after { content: ""; display: block; margin: auto; height: 3px; width: 0px; background: transparent; transition: width .5s ease, background-color .5s ease; } .sliding-middle-out:hover:after { width: 100%; background: #1A1A1A; } </style>');
elm.wraper = $('<ul></ul>');
elm.wraper.css({
'list-style' : 'none',
'padding' : '0',
'margin' : '0',
'width' : '100%',
'z-index' : '2500',
'background' : iniCol,
'box-sizing' : 'border-box',
'border-bottom' : '1px solid black',
});
var i = 0;
$(o.page).each(function() {
elm.list = $('<li></li>');
elm.list = elm.list.css({
'cursor' : 'pointer',
'list-style' : 'none',
'display' : 'inline-block',
'line-height' : '20px',
'padding' : '15px',
});
elm.list = elm.list.addClass('sliding-middle-out');
$(this).attr('id',o.pageName[i]);
elm.list = elm.list.html('<a href="#'+o.pageName[i]+'">'+o.pageName[i]+'</a>');
elm.wraper.append(elm.list);
elm.wraper.find('a').css({'color':'inherit','text-decoration':'none'});
i++;
});
if(o.stickyCls){ elm.wraper.addClass(o.stickyCls);}
if((o.header !== null) && (o.header !== '')){
elm.wraper.css({
'position' :'absolute',
'top' : $(o.header).outerHeight(),
});
$(o.header).after(elm.wraper);
newOff = 0;
}else{
$(o.page).parent().prepend(elm.wraper);
elm.wraper.css({
'position' :'fixed',
'top' : '0px',
});
newOff = parseInt($(o.page).parent().offset().top,10)+parseInt(stickyH,10);
}
$(o.page).parent('div').offset({ top: newOff});
}
function stickyClick(e){
var color;
var thsId = $(e).index();
var act = $('.actived');
var target = $(o.page).eq(thsId);
var targetOff = target.offset().top;
if(o.sticky){ targetOff = targetOff-parseInt(stickyH,10); }
$('body, html').animate({scrollTop: targetOff},{
start : function(){ act.removeClass('actived'); },
easing : o.easing,
duration : o.time,
complete : function(){
target.addClass('actived');
if($('.actived').prev(o.page).length > 0){
color = $('.actived').prev(o.page).css('backgroundColor');
}
else{
color = $(o.page).last().css('backgroundColor');
}
if(!o.stickyCls){
elm.wraper.animate({'backgroundColor':color}, o.time/4);
}
},
});
}
if(o.sticky){
sticky();
stickyH = elm.wraper.outerHeight();
elm.wraper.children('li').on('click', function(){ stickyClick(this); });
}
header();
__init();
$(window).on('scroll', function(){
var off;
var hegt;
var wndw = $(window).height();
var amt = window.scrollY;
if((o.header !== null) && (o.header !== '') && (o.header)){
var headerHeight = $(o.header).outerHeight();
if(amt > headerHeight){
if(o.sticky){
elm.wraper.css({
'position' : 'fixed',
'top' : '0',
});
}
}
else{
if(o.sticky){
elm.wraper.css({
'position' :'absolute',
'top' : $(o.header).outerHeight(),
});
}
}
}
if($('.actived').length > 0){
off = $('.actived').offset().top;
hegt = $('.actived').outerHeight();
if(o.sticky){hegt = hegt+parseInt(elm.wraper.height(),10);}
}
if(hegt < wndw){
var nxtThreshold = (wndw-hegt)+parseInt(o.threshold,10);
if((parseInt(amt,10)+parseInt(wndw,10)) > parseInt(off,10)+parseInt(hegt,10)+parseInt(nxtThreshold,10)){ toNext(o.page); }
else if(amt < off-o.threshold-5){ toPrev(o.page); }
}
else{
if((parseInt(amt,10)+parseInt(wndw,10)) > parseInt(off,10)+parseInt(hegt,10)+parseInt(o.threshold,10)){ toNext(o.page); }
else if(amt < off-o.threshold-5){ toPrev(o.page); }
}
});
};
// END OF THE PLUGIN!!//
$(document).page({
'page' : '.section',
'header' : '.header',
'sticky' : true,
'stickyCls' : 'nav',
'pageName' : ['Pages/Name', 'Sticky Menu', 'Easing', 'Threshold/Time']
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
body{
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
margin:0;
}
.nav{
background: rgb(55,55,55);
color:white;
height:100px;
text-align:center;
}
.header{
background-color: #A93739;
width:100% !important;
margin-left:0 !important;
text-align:center;
padding: 100px;
height: 500px;
box-sizing:border-box;
}
.section{
width:80%;
margin-left:10%;
padding:1px;
text-align:center;
box-sizing:border-box;
}
.section div{
height: 60%;
margin-top: 20%;
}
.content{
background: linear-gradient(#8b9da9, #fff6e4);
box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
min-height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment