Sticky Collapsable Footer

Developer
Kelsey Paone
Size
2,715 Kb
Views
22,264
  1. Sticky Collapsable Footer Previews
  2. Sticky Collapsable Footer HTML Codes
  3. Sticky Collapsable Footer CSS Codes
  4. Sticky Collapsable Footer JS Codes

How do I make an sticky collapsable footer?

What is a sticky collapsable footer? How do you make a sticky collapsable footer? This script and codes were developed by Kelsey Paone on 28 November 2022, Monday.

Sticky Collapsable Footer Previews
IQ Test

Sticky Collapsable Footer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Collapsable Footer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page"> <div class="ug-mobile-signup"> <div id="ugMobileCall"> <h1>Click the button below to expand</h1> <div class="block-button blue-bg" id="ugMobileSignupClicked">Expand!</div> </div> <div id="ugMobileForm"> <img src="http://replygif.net/i/1409.gif"> <a id="ugMobileClose">Close Me</a> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Sticky Collapsable Footer - Script Codes CSS Codes

body { box-sizing: border-box; color: #505e67; font-family: 'Source Sans Pro', Arial, Sans-Serif; margin: 0 auto; max-width: 500px; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1 { font-size: 20px; font-weight: bold; text-align: center;
}
.block-button { background-color: #2e7ad1; border: 2px solid #2e7ad1; border-radius: 3px; color: #fff; font-size: 18px; font-weight: 600; margin: 0; padding: 10px; text-align: center; transition: 0.3s; -webkit-transition: 0.3s width: 100%;
}
.block-button:hover { background-color: #fff; color: #2e7ad1;
}
.page { background: linear-gradient(#0cb6c0, #054448); height: 5000px;
}
.ug-mobile-signup { background: #fff; border-top: 1px solid #a5b6c0; bottom: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); margin: 0; position: fixed; width: 100%; h4 { display: inline-block; font-size: 20px; text-align: center; margin: 10px; } .block-button.blue-bg { float: right; font-size: 18px; font-weight: 600; margin: 0; padding: 10px; width: 30%; }
}
#ugMobileCall { padding: 20px;
}
#ugMobileForm { display: none; padding: 20px; img { display: block; margin: 0 auto; max-width: 400px; width: 100%; }
}
a#ugMobileClose { display: block; font-size: 14px; margin-top: 15px; text-align: center; text-decoration: underline;
}
@media (max-width: 600px) { .ug-mobile-signup { h4 { display: block!important; margin: 0 0 20px 0!important; } .block-button.blue-bg { float: none; width: 100%!important; } }
}
@media (max-width: 1230px) { .ug-mobile-signup p.signup-disclaimer { max-width: 418px; }
}

Sticky Collapsable Footer - Script Codes JS Codes

$(document).ready(function() { var topOfOthDiv = $('#ultimateHero').offset().top, sidebarHeight = $('#ultimateToc').height(), contentHeight = $('#ultimateContent').height(), windowHeight = $(window).height(), mobileFormHeight = $('.ug-mobile-signup').height() + 30, bottomOfOthDiv = ($('footer').offset().top) - sidebarHeight - 100, footerTop = $('footer').offset().top - windowHeight, footerHeight = $('footer').height() + $('.sub-footer').height(), documentHeight = $(document).height(), ultimateGuide = {}; if($(window).scrollTop() > footerTop) { $('.ug-mobile-signup').css({ 'position' : 'absolute', 'bottom' : ((documentHeight - windowHeight) - footerHeight - (mobileFormHeight)) * -1 }); } else { $('.ug-mobile-signup').css({ 'position' : 'fixed', 'bottom' : '0' }); }
});
$('#ugMobileMenu').on('click', function(){ $('#ugMobileDropdown').slideToggle('fast');
});
$('#ugMobileSignupClicked').on('click', function(){ $('#ugMobileForm').css('display' , 'block'); $('#ugMobileCall').css('display' , 'none');
});
$('#ugMobileClose').on('click', function(){ $('#ugMobileForm').css('display' , 'none'); $('#ugMobileCall').css('display' , 'block');
});
Sticky Collapsable Footer - Script Codes
Sticky Collapsable Footer - Script Codes
Home Page Home
Developer Kelsey Paone
Username kelseypaone
Uploaded November 28, 2022
Rating 3
Size 2,715 Kb
Views 22,264
Do you need developer help for Sticky Collapsable Footer?

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!

Kelsey Paone (kelseypaone) Script Codes
Name
Qualaroo
Friendly Flexbox Carousel
Responsive Comparison Table
A Pen by Kelsey Paone
Responsive Social Cards
Create amazing blog posts 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!