Is it possible to eliminate the sticky class as you scroll down?

Question

Is it possible to eliminate the sticky class as you scroll down?

Check out this jQuery code I wrote to remove the sticky class while scrolling down:

$(window).scroll(function (e) {
    if ($('.main_form_wrapper').length != 0) {
        var window_scroll = $(window).scrollTop();
        console.log(window_scroll, "current window scroll position")
        var bottom_position = window_scroll + $('.main_form_wrapper').outerHeight(true);
        console.log(bottom_position, "position of main form wrapper at the bottom")
        var form_top_offset = $('.main_form_wrapper').offset().top;
        console.log(form_top_offset, "offset of main form wrapper from the top")
        var footer_top_offset = $('.top_footer').offset().top;
        console.log(footer_top_offset,"offset of the top footer")
        if (window_scroll > form_top_offset &&  bottom_position < footer_top_offset) {
            $(".main_form_wrapper").addClass('sticky'); 
        } else {
            console.log('reached end')
            $(".main_form_wrapper").removeClass('sticky');  
        }
    }
});

If anyone can offer some guidance, that would be greatly appreciated!

jquery html css

Answer 1

Answer №1

This content is loosely based on a similar post about Detecting scroll direction.

Here's an example I put together for you. The key point to note is the importance of storing the last scroll position in order to determine whether the user is scrolling up or down:

var lastScrollTop = 0;
var theWrap = $('.wrap');
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // Code for downward scroll
       theWrap.removeClass('sticky');
   } else {
      // Code for upward scroll
       theWrap.addClass('sticky');
   }
   lastScrollTop = st;
});

.wrap {
  width: 100px;
  height: 2000px;
  background-color: orange;
}
.wrap.sticky {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap sticky">

</div>

Answer 2

This content is loosely based on a similar post about Detecting scroll direction.

Here's an example I put together for you. The key point to note is the importance of storing the last scroll position in order to determine whether the user is scrolling up or down:

var lastScrollTop = 0;
var theWrap = $('.wrap');
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // Code for downward scroll
       theWrap.removeClass('sticky');
   } else {
      // Code for upward scroll
       theWrap.addClass('sticky');
   }
   lastScrollTop = st;
});

.wrap {
  width: 100px;
  height: 2000px;
  background-color: orange;
}
.wrap.sticky {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap sticky">

</div>

Is it possible to eliminate the sticky class as you scroll down?

Answer №1

Similar questions

Bootstrap's grid width is not aligned properly

Validation in PHP and Javascript is only partially effective

What is the best way to divide this string with jQuery?

Effortlessly switch between CSS animation styles while adjusting animation settings

How can I fix the alignment issue with my centered div?

Adjusting the properties of an Image Object using jQuery

How can information be transferred from a servlet to javascript in an Ajax program?

The background-size property fails to function properly on mobile devices

A Duplicate Invocation of the JQuery Ajax Function Utilizing Identical Data

Converting a PHP string into a JSON array

Achieving full white space utilization with inline block elements

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Instructions for converting a MySQL select statement within a foreach() loop into an HTML form

Autocomplete for Converting Postal Codes to Cities

The script is malfunctioning on Google Chrome

Rearrange the characters within the variable before inserting them after

Determining if a Website is Responsive with PHP

Ways to shift text upwards while scrolling in a downward direction?

JavaScript drop-down menu malfunctioning

Picking out specific SharePoint components using jQuery