In the center of a full-screen hero section, there is a form. When it reaches the top, its position becomes fixed and additional classes are added through a script - such as shrinking its height and adding a background.
What I aim to achieve is for the form to hide when it reaches the bottom of the section#hero and then display again when the user scrolls up.
If you visit , you can see that their search container behaves exactly how I want my sign-up form in the landing page to behave.
Thank you in advance!
Here is the section containing the form:
$(function() {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#grab').offset().top;
var Innerwidth = window.innerWidth;
$(window).scroll(function() {
if (Innerwidth >= 767) {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#grab').css({
position: 'fixed',
top: '0',
left: '0',
width: '100%',
background: '#363451',
paddingBottom: '15px'
});
$('form#signUp').css({
marginTop: '15px'
});
$('form#signUp input').css({
height: '45px',
fontSize: '14px'
});
$('form#signUp button').css({
height: '45px'
});
} else {
$('#grab').css({
position: 'relative',
background: 'none'
});
$('form#signUp').css({
marginTop: '25px'
});
$('form#signUp input').css({
height: '65px',
fontSize: '16px'
});
$('form#signUp button').css({
height: '65px'
});
}
}
});
});