Skip to content

Instantly share code, notes, and snippets.

@avishai84

avishai84/sticky-nav

Created October 31, 2017 18:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save avishai84/daee119b652c493af3248c69ebc0b95f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save avishai84/daee119b652c493af3248c69ebc0b95f to your computer and use it in GitHub Desktop.
Download ZIP
sticky-nav
Raw
sticky-nav
<style type="text/css">
/* ***********************************************************************
STICKY DRAWER CSS
************************************************************************ */
@media(max-width:767px){
.wcd_sticky_drawer{
opacity:0;
display:none;
}
}
@media(min-width:768px){
.wcd_sticky_drawer{
display: block;
position: absolute;
right:0;
opacity:0;
-webkit-transition: opacity 250ms ease-in;
-moz-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in;
background-color:#fff;
z-index: 999996;
padding-top: .5em;
}
.wcd_sticky_drawer .closeSticker{
display: none;
-webkit-transition: right 100ms ease-out;
-moz-transition: right 100ms ease-out;
transition: right 100ms ease-out;
border: 1px solid #efefef;
position: absolute;
top: -2px;
width: 180px;
height: 100%;
right: -220px;
padding-left: 2.5em;
padding-bottom: 2em;
background-color: #fff;
}
.wcd_sticky_drawer .openSticker{
display: block;
-webkit-transition: right 150ms ease-out;
-moz-transition: right 150ms ease-out;
transition: right 150ms ease-out;
border: 1px solid #efefef;
position: absolute;
top: -2px;
width: 180px;
height: auto;
right: -220px;
padding-top: 10%;
padding-left: 2.5em;
padding-bottom: 2em;
background-color: #fff;
}
/* Image */
.wcd_sticky_drawer .svg-sticky-image {
max-width: 44px;
position: relative;
z-index: 20;
}
/* Blackout */
.wcd_sticky_drawer-blackout{
width:100%;
height:100%;
background-color:rgba(255,255,255,0.6);
position: absolute;
top: 0;
left: 0;
}
.wcd_sticky_drawer .svg-sticky-image:hover {
cursor: pointer;
}
/* CTA */
.wcd_sticky_drawer .wrapperCTA.stickyCTA{
margin-left: -1em;
}
.wcd_sticky_drawer .wrapperCTA.stickyCTA ul.CTAmenu--fall17 > li.CTAlist[data-list-style="inline-block"] > ul.CTAdropdownList li a:hover{
color:#a2202b;
}
}
</style>
<!--
******************************************************************
STICKY DRAWER HTML
******************************************************************
-->
<div class="wcd_sticky_drawer">
<span class="sds_visually-hidden">Navigation</span>
<div class="svg-sticky-image">
<div>
<picture>
<source media="(max-width: 767px)" srcset="/assets/common/clear.gif">
<img src="/Asset_Archive/GPWeb/content/0014/300/540/assets/stickyNav/BAR_DESK_COPY.svg" alt="navigation">
</picture>
</div>
<div style="display:none;">
<picture>
<source media="(max-width: 767px)" srcset="/assets/common/clear.gif">
<img src="/Asset_Archive/GPWeb/content/0014/300/540/assets/stickyNav/BAR_DESK_COPY_close.svg" alt="navigation">
</picture>
</div>
</div>
<!-- Sticky Drawer -->
<div class="closeSticker">
<div class="wrapperCTA stickyCTA">
<ul class="CTAmenu--fall17">
<li class="CTAlist underline" data-style-at-lg="list" data-list-style="inline-block">
<ul class="CTAdropdownList">
<li><a href="/browse/category.do?cid=1093820#department=136" onclick="wcd_addTracking('GiftGuide_SideNav_Body_W','');">women</a></li>
<li><a href="/browse/category.do?cid=1093833" onclick="wcd_addTracking('GiftGuide_SideNav_Body_Body','');">gapbody</a></li>
<li><a href="/browse/category.do?cid=1093935" onclick="wcd_addTracking('GiftGuide_SideNav_Body_GapFit','');">gapfit</a></li>
<li><a href="/browse/category.do?cid=1093921" onclick="wcd_addTracking('GiftGuide_SideNav_Body_Mat','');">maternity</a></li>
<li><a href="/browse/category.do?cid=1093838#department=136" onclick="wcd_addTracking('GiftGuide_SideNav_Body_M','');">men</a></li>
<li><a href="/browse/category.do?cid=1093891#department=48" onclick="wcd_addTracking('GiftGuide_SideNav_Body_G','');">girls</a></li>
<li><a href="/browse/category.do?cid=1093886#department=16" onclick="wcd_addTracking('GiftGuide_SideNav_Body_B','');">boys</a></li>
<li><a href="/browse/category.do?cid=1086184#department=165" onclick="wcd_addTracking('GiftGuide_SideNav_Body_TG','');">toddler girl</a></li>
<li><a href="/browse/category.do?cid=1086185#department=165" onclick="wcd_addTracking('GiftGuide_SideNav_Body_TB','');">toddler boy</a></li>
<li><a href="/browse/category.do?cid=1087979#department=166" onclick="wcd_addTracking('GiftGuide_SideNav_Body_BabyGirl','');">baby girl</a></li>
<li><a href="/browse/category.do?cid=1087981#department=166" onclick="wcd_addTracking('GiftGuide_SideNav_Body_BabyBoy','');">baby boy</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--
******************************************************************
JS STICKY DRAWER
******************************************************************
-->
<script type="text/javascript">
// Gift Card Guide Sticky Menu CTA
// Launch Date 11/1/2017
// Author: Avishai Taashur, WCD
var mainContent=jQuery('#mainContent'),
wcd_sticky_drawer = jQuery('.wcd_sticky_drawer'),
isBlackOutClicked = false;
var WCDStickyRightNav = {
init: function(){
// Append sticky nav to the page and initiate scroller
jQuery(wcd_sticky_drawer).insertAfter(mainContent);
WCDStickyRightNav.scroller();
// Pass in target click object
WCDStickyRightNav.openCloseSticker('.wcd_sticky_drawer .svg-sticky-image');
},
scroller: function(){
var topPx;
jQuery(window).on('scroll.stickyRight', function () {
if(jQuery(window).width()>=768){
// topPx is the position of the sticky drawer from the top on scroll
topPx = jQuery(window).scrollTop()+95+'px';
// Show/Hide sticky drawer from top
if(jQuery(window).scrollTop() >= 1068){
wcd_sticky_drawer.css('opacity','1');
}else{
wcd_sticky_drawer.css('opacity','0');
var blackoutArea2 = jQuery('.wcd_sticky_drawer-blackout')[0];
// Remove blockout area and close drawer if open
if(blackoutArea2 != undefined || blackoutArea2 != null){
blackoutArea2.remove();
jQuery(wcd_sticky_drawer).find('.openSticker').removeClass('openSticker').addClass('closeSticker').hide();
// Switch SVG image to show plus/minus
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:first-child').css('display','block');
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:nth-child(2)').css('display','none');
}
}
wcd_sticky_drawer.css('top',topPx);
// Detect if footer in viewport
if(WCDStickyRightNav.detectOnScreenElem('#footer')){
var blackoutArea3 = jQuery('.wcd_sticky_drawer-blackout')[0];
wcd_sticky_drawer.css('opacity','0');
// Remove blockout and close drawer if open
if(blackoutArea3 != undefined || blackoutArea3 != null){
blackoutArea3.remove();
jQuery(wcd_sticky_drawer).find('.openSticker').removeClass('openSticker').addClass('closeSticker').hide();
// Switch SVG image to show plus/minus
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:first-child').css('display','block');
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:nth-child(2)').css('display','none');
}
}
}
});
},
detectOnScreenElem: function(elementName){
// pass any element to be detected on screen
// isOnScreen is a dependent (external) function
var elem;
elem = jQuery(elementName).isOnScreen();
return elem;
},
openCloseSticker: function(elementName){
var elementToTarget = jQuery(elementName),
self, elemTarget,
blackoutDiv = '<div class="wcd_sticky_drawer-blackout">'+'</div>';
elementToTarget.on('click', function(event){
self = jQuery(this);
event.stopPropagation();
// check for .openSticker / .closeSticker class state
elemTarget = self.parent().find('.closeSticker');
if(elemTarget.hasClass('closeSticker')){
jQuery(elemTarget).show('fast',function(){
elemTarget.removeClass('closeSticker').addClass('openSticker');
elemTarget.css('right',0);
// Switch SVG image to show plus/minus
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:first-child').css('display','none');
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:nth-child(2)').css('display','block');
// Insert blackout div
jQuery(blackoutDiv).insertAfter(mainContent);
// Pass on blackout div to a 2nd click event
WCDStickyRightNav.blackOutClickEvent('.wcd_sticky_drawer-blackout');
});
}else{
elemTarget = self.parent().find('.openSticker');
jQuery(elemTarget).hide('fast',function(){
elemTarget.removeClass('openSticker').addClass('closeSticker');
elemTarget.css('right',-220);
// Switch SVG image to show plus/minus
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:first-child').css('display','block');
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:nth-child(2)').css('display','none');
// Remove blckout div
jQuery('.wcd_sticky_drawer-blackout').remove();
// Turn off click on blackout
jQuery('.wcd_sticky_drawer-blackout').off('click.blockOutClickEventClass');
// set isBlackOutClicked to false
isBlackOutClicked = false;
});
}
});
},
blackOutClickEvent : function(blackTarget){
var blockOutArea = jQuery(blackTarget);
blockOutArea.on('click.blockOutClickEventClass', function(event){
var that = jQuery(this);
event.stopPropagation();
// If user click on blackout
if(that.is(event.target) && that.has(event.target).length === 0){
var openSticker = jQuery(wcd_sticky_drawer).find('.openSticker');
// After click remove the blackout div, trun off click event and reset drawer status
jQuery(openSticker).hide('fast',function(){
openSticker.removeClass('openSticker').addClass('closeSticker');
jQuery(openSticker).removeClass('openSticker').addClass('closeSticker').hide();
openSticker.css('right',-220);
// Switch SVG image to show plus/minus
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:first-child').css('display','block');
jQuery('.wcd_sticky_drawer .svg-sticky-image > div:nth-child(2)').css('display','none');
// Remove blackout div and reset click event
that.remove();
isBlackOutClicked = true;
WCDStickyRightNav.removeClickEventFromBlackOut(isBlackOutClicked);
});
}
});
},
removeClickEventFromBlackOut: function(isBlackOutClicked){
this.isBlackOutClicked = isBlackOutClicked;
if(isBlackOutClicked === true){
// Turn off click on blackout
jQuery('.wcd_sticky_drawer-blackout').off('click.blockOutClickEventClass');
// Set isBlackOutClicked to false
isBlackOutClicked = false;
}
}
};
// PLEASE DO NOT REMOVE (Sticky Nav depends on this function)
//Example of how to check an elemet $('Obj').isOnScreen();
//if console.log object it will return true/false
jQuery.fn.isOnScreen = function(){
var win = jQuery(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
function loopThroughCTAStickyNav(prefixName){
var giftCTASticky = jQuery('.wcd_sticky_drawer .stickyCTA .CTAmenu--fall17 .CTAdropdownList li > a');
jQuery(giftCTASticky).each(function(event, name) {
var onKlickNameSticky = name.attributes.onclick.nodeValue;
var replcInfoTidSticky = onKlickNameSticky.replace('_Body_', prefixName);
jQuery(this).attr('onclick', replcInfoTidSticky);
});
}
var divisionCID = gidLib.getQuerystringParam('cid');
function wcdUpdateStickyNavCTA(divisionName){
// get current division
var divisionSticky = divisionName;
switch (divisionSticky) {
case '1093820':
loopThroughCTAStickyNav('_W_');
break;
case '1093833':
loopThroughCTAStickyNav('_Body_');
break;
case '1093935':
loopThroughCTAStickyNav('_GapFit_');
break;
case '1093921':
loopThroughCTAStickyNav('_Mat_');
break;
case '1093838':
loopThroughCTAStickyNav('_M_');
break;
case '1093891':
loopThroughCTAStickyNav('_G_');
break;
case '1093886':
loopThroughCTAStickyNav('_B_');
break;
case '1086184':
loopThroughCTAStickyNav('_TG_');
break;
case '1086185':
loopThroughCTAStickyNav('_TB_');
break;
case '1087979':
loopThroughCTAStickyNav('_BabyGirl_');
break;
case '1087981':
loopThroughCTAStickyNav('_BabyBoy_');
break;
}
}
jQuery(document).ready(function(e) {
// Initiate sticky nav
WCDStickyRightNav.init();
wcdUpdateStickyNavCTA(divisionCID);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment