What is a method to raise the height when scrolling down without reducing it when scrolling up?

For my One Page project, I want a DIV element to increase in height when scrolling down, but maintain that increased height when scrolling up.

Currently, I am utilizing JQuery with the code snippet below:

$(function(){
    $(window).scroll(function() {
        var $box = $('#content');
        var scrollTopPos = $(this).scrollTop();

        $box.height( scrollTopPos - 600 );
        if( scrollTopPos == 0 ) {
            $box.hide();
        } else {
            $box.show();
        }
    }).scroll();
javascriptjquerycss

Answer №1

To determine the direction of the scroll, whether it is upwards or downwards, you can keep track of the previous scroll position and compare it with the current scrollTop() value in the event handler:

let lastScrollPos = 0;
$(window).scroll(function() {
    let currentScrollPos = $(this).scrollTop();
    if (currentScrollPos > lastScrollPos){
        // Scrolling down... Increase height of div
    } else {
       // Scrolling up, no action needed
    }
    lastScrollPos = currentScrollPos;
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to share code across AngularJS frontend and Node.js backend

How can code be effectively shared between an AngularJS client and a Node.js server? After creating an AngularJS application, I now need to develop a RESTful server to provide data to the client. Some Angular services used on the client-side could also be ...

javascriptnode.jsangularjsexpresscode-reuse

I'm having trouble getting my ajax call to work properly when I include form-tags. What could

I am encountering an issue with my simple ajax call. It seems that adding form tags to my code is causing the entire ajax response to break. I'm curious as to why this is happening. <div id="overviewList" class="col-sm-3 offset-sm-1 text-center"&g ...

phpjquery

removing a property from an object using AngularJS

Currently, I am working on a project involving AngularJS. The main goal of this project is to create a dynamic JSON generator using AngularJS. I have already developed the initial version and it works well. However, there is a minor issue with my applicati ...

javascriptangularjs

Is it possible to transfer data between the beforeSend and success functions within the jQuery .ajax method?

The Issue When utilizing AJAX to request data from a remote API, the asynchronous nature of the request means that responses come back whenever they are ready. The challenge arises when making multiple calls to the same API with different parameters, as i ...

jqueryajax

What is the best way to iterate over an array of objects?

I have an Array of Objects that I need to use in order to create an HTML Table: Array(5) 0: Object id: 4 name: Sand Jane address: Green Sand Street ... ... ... 1: Object 2: Object ... ... ... Currently, I am able to perform a search wit ...

javascriptarraysjsonangular

How can CakePhp's $ajax->link be used to manipulate the result on the complete action?

Recently, I've started working with cakePhp to handle ajax requests using prototype. While my controller is returning the correct value, I'm struggling to figure out how to properly handle it when it comes back looking like this: <?php echo ...

javascriptajaxcakephpprototypejshelper

Every time an input field is clicked, an email is sent

I'm struggling with the contact form on my website. Instead of sending an email after clicking on each input field, I want it to send only one email after hitting the submit button. Currently, it sends a total of 5 emails - 1 with user inputs and 4 wi ...

phpjqueryhtmlajax

Reactjs slider causes unexpected useState behavior

I created an autoplay Slider with three cards using the useEffect hook. However, the manual "previous" and "forward" buttons are not functioning correctly. The useState function is not updating values as expected, leading to unexpected changes in state. ...

javascriptreactjsreact-hooksuse-effectuse-state

Any modifications made to a copied object will result in changes to the original object

The original object is being affected when changes are made to the cloned object. const original = { "appList": [{ "appId": "app-1", "serviceList": [{ "service": "servic ...

javascriptarraysobjectecmascript-6ecmascript-5

Adjusting Images and Icons' Sizes Automatically on a Single Line

Imagine a row of social media icons/images (like Facebook, Twitter, LinkedIn) displayed together. How can I ensure that when I add more icons/images to this row, their sizes adjust automatically to stay on the same line instead of moving to the next one? I ...

htmlcssimageicons

Please enter a string and I will locate it within an array. If found, I will provide you with information about that string as a fact

I have a specific challenge I need help with. I have a pre-defined array that contains country names and corresponding facts about each country. What I am trying to achieve is to check if the user-inputted word matches any of the countries in my array, a ...

javascriptarraysnode.jsstring

Ways to adjust the distance between logo and slider

I am using this script to showcase some products. You can find the script at: http://tympanus.net/Tutorials/ItemSlider/ When resizing the web browser from maximum size to smaller, I find that the height between the logo and shoes is too large for my likin ...

jqueryhtmlcssslider

Retrieve the text content of the initial li element within each ul

I have numerous <ul> lists and I'm attempting to extract the text from the first li element of each list. The HTML markup is straightforward: <ul> <li>abc</li> <li>def</li> <li>ghi</li> </u ...

javascriptjquery

jQuery enables the toggling of child elements with a specific class (handlers) upon clicking

My goal is to change the style of a specific child element when I click on its parent. I was able to achieve this using event handlers: $(".p1").on({ mouseenter: mouseEnter, mouseleave: mouseLeave }); function mouseEnter() { $(this).css(&apos ...

handlerparent-childjquery

AngularJS Update Parent-Child Relationship: Enhancing the Details

When Panel header is clicked, I want to update the respective Panel body with the corresponding data. In my Angular code on Plunker, clicking "Test1" should only update "Test1detail" in the body. Click here for the Plunker Here's the code snippet fr ...

javascriptangularjs

Tips for utilizing the useContext hook in Next.js

I'm facing an issue with persisting information between different pages using nextjs and the useContext hook. Despite changing a variable in one page, it reverts back to its default value when navigating to another page. Below is a glimpse of the dir ...

javascriptreactjsnext.jsreact-context

Unable to isolate segments of a string

Looking for a way to extract two different IDs from the following string: SPList:6E5F5E0D-0CA4-426C-A523-134BA33369D7?SPWeb:C5DD2ADA-E0C4-4971-961F-233789297FE9: using Javascript. The regular expression being used is : ^SPList\:(?:[0-9A-Za-z\-]+ ...

javascriptregex

Select options with disabled sorting feature

Is there a way to use CSS to sort disabled options in a select element? I would like all disabled options to appear at the bottom, with enabled options at the top. In the screenshot attached, you can see that enabled options are black and disabled options ...

htmlcss

The Mongoose findOneAndUpdate method will only return the newly added document when using the $push

Provided here is a structured representation of my "profile" collection: { _id : ObjectId("2bb0fad110"), name : "Tommy", defaultrates : [ {_id : ObjectId("444cbcfd52"), rate : 35.0, raisedOn : "5/2/2009"}, {_ ...

javascriptnode.jsmongoose

What is the best way to craft an if/else statement for a situation when a twig variable is undefined?

When utilizing twig to declare a variable called user: <script type="text/javascript> {% if user is defined %} var user = { example: {{ userjson | raw }} }; {% endif %} </script> If a user is not logged in, an error message a ...

javascriptjsontwig