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

Retrieve the heading of a click-able element using jQuery

What is the best way to locate and extract the content of an HTML element using XPath in Selenium with VBA?

Implementing Object Value Assignment to an Element Using jQuery

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

How to rotate text direction using JavaScript and CSS

Ways to customize the color of a ReactSelect component?

The chosen element contains a value of -1

When using the jQuery ajax function to validate a form, it is important to note that the $_POST variables

Having trouble retrieving data from the table with AJAX and CodeIgniter

Even after dynamically removing the class from the element, the Click event can still be detected

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Initiate the execution of JavaScript functions in the loaded partial view using Ajax

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

Centered content appears smaller than the surrounding div

Retrieving the checkbox's status from the database

Proper method for posting an object array through a form submission

Tips for adjusting the font size options within the Autocomplete feature of Material UI Version 5

Which UL should be selected next?

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

What is the best way to ensure that these social icons are perfectly centered on the page across all web browsers?