Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disappears from view, the user is then scrolled down instead of being at the top of the page again.

I want the user to be able to scroll past the div (making it off-screen) and then stay in the same position on the page, rather than being pushed down after the div is hidden.

fiddle: https://jsfiddle.net/c60cw8r1/

In the fiddle example, it should keep you at Wrap1 when scrolling down, not by Wrap2.

HTML:

<div id="slideDown" style="position: relative; display: none;">
    <a class="howClose" href="#">
        <span class="screenReader">
            Close How It Works
        </span>
            ×
    </a>

</div>
  <div id="grabPromo" style="text-align: center;"><a href="#">How It Works</a></div>
<div class="site-wrapper">
  Wrap1
</div>
<div class="site-wrapper">
  Wrap2
</div>

CSS:

#slideDown {
    background:#ace; 
    display: none; 
    clear: both; 
    height: 600px;
    top: 0px;
    z-index: 1000;

}

.howClose {
    color: #007a87;
    position: absolute;
    right: 25px;
    top: 25px;
    opacity: 0.6;
}

.screenReader {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    font-size: 25px;
    width: 1px;
}   

.site-wrapper {
  height: 600px;
}

JS:

$('#grabPromo').click(function(e){
    $('.site-wrapper').before( $('#slideDown') );
    $('#slideDown').slideToggle();
});

$('#closePromo').click(function(e){

    $('#slideDown').slideUp();
});

$('.howClose').click(function(e){

    $('#slideDown').slideUp();
});

var closeTop = $('.site-wrapper').offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > 580) {
        if ($('#slideDown').css('display') != 'none') {

            $('#slideDown').hide();
        }
        else {

        }


    }
});

Answer №1

The issue you are experiencing stems from the fact that when you hide the "How it works" element, the body does not automatically return to its original scroll position.

To address this problem, I made some adjustments to your code and implemented the desired effect in this updated fiddle https://jsfiddle.net/abc123xy/.

One key addition I made was:

$("body").scrollTop($("#wrap_1").offset().top - 20);

This line of code runs after the "how it works" element has been hidden, ensuring that the body scrolls back to its correct position.

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

CSS: Problem Arising from Line Connections Between Tree Elements

I'm currently working on connecting tree nodes with lines in a drawing. I've managed to achieve it to some extent, but there are a few issues like dangling lines that I need to fix. You can find the implementation on codepen here: https://codepe ...

What steps can be taken to resolve the issue of Ajax not retrieving any data from

I'm struggling to identify the error in this code. I have created a search bar and implemented AJAX to automatically fetch data. Here is the HTML file: <!DOCTYPE html> <html> <head> <title></title> <script ...

Is it possible to continuously loop and gradually fade the same image URL using JavaScript?

I have a dynamic image stored on my web server at example.com/webcam.jpg that is continuously updated by the server. My goal is to display this image on a static HTML page with a looping effect that smoothly transitions from the previous image to the upda ...

What is the best way to make jQuery not consider hidden elements?

Apologies for not sharing the code, as I know many of you prefer to see it. I am currently working on developing a comprehensive calculator for my small business, and I am aware that I am making several mistakes. I kindly request that you do not critique ...

The persistent space between the navbar and the index page remains despite the suggested fixes provided

There appears to be a discrepancy between the navigation bar and the rest of the page. Despite my efforts to adjust margins, I haven't been able to resolve it. The system is prompting me for more details before posting this question, but I'm unsu ...

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

Is it conceivable that Rails may be rendering HTML at a slower rate compared to static

When using a Rails layout, you can include HTML tags to render images like this: <%= image_tag("logo.png", :alt => "Sample App", :class => "round") %> This will generate the following HTML code: <img alt="Sample App" class="round" src="/i ...

How to Implement Dotted Line Styling for Row Data in ReactJS with CSS?

I'm working on a condensed design with Reactjs Monday......................08:00 AM - 21:00 PM I have a lot of dots in the display above. How can I make it shorter without using so many dots? Entering numerous dots like this is not ideal for the webs ...

What could be the reason for my reset function not halting?

Why does my reset button keep clearing the canvas and emptying the chat box even though the return statement is supposed to end the function? Main.js var reset = function() { context.clearRect(0,0, canvas[0].width, canvas[0].height); context.be ...

fabricJS: clicking on various buttons with the mouse

I have successfully created multiple canvases on the same page based on the number of PDF pages. However, I am facing an issue where some buttons to add different canvases are not working as expected. What I am attempting to do is add text on mouse down fo ...

Real estate listing featuring unique symbols

How do I include the ' character in properties when writing my object, like this: const championsList = { Kha'Zi: '...', }; Any suggestions on how to achieve this? ...

I desire to alter the description of an item within a separate div, specifically in a bootstrap

I used the map method to render all the images. However, I need a way to track the current image index so that I can change the item description located in another div. Alternatively, if you have any other solutions, please let me know. App.js : import Ca ...

Sequential actions triggered by pressing keys, one by one. (Utilizing Jquery for an RPG-style dialogue box)

I'm currently working on a JQuery project where I need to implement a dialog box for a game. My goal is to display text1 when the enter key is pressed. Upon pressing enter again, text2 should appear, and so on for up to 7 texts. However, I'm f ...

What is the process of transforming a basic JavaScript function into a TypeScript function?

As a Java developer diving into TypeScript for frontend development, I've encountered a simple JavaScript code snippet that I'd like to convert to TypeScript. The original JavaScript code is: let numbers = [123, 234, 345, 456, 567]; let names = ...

What steps should be taken to correct the misalignment of the closing x symbol in the alert box?

After making adjustments to the line height, the closing x mark on the right now aligns closer to the bottom of the alert message box. I am currently utilizing Bootstrap version 5.0.1. Is there a way for me to vertically center the x mark? Thank you. CSS: ...

What is the most effective approach to integrating socket.io as a submodule into the ExpressJS framework?

In my current project, I am working on developing an application using ExpressJs and following the submodule architecture recommended by tjholowaychuk. Furthermore, I also want to incorporate real-time socket interactions into the app by integrating socke ...

Retrieving ng-pattern as a variable from a service

Hey there! I'm currently working on an application that requires extensive form validation across multiple pages. To streamline this process, I am attempting to extract validation patterns from a service used among the controllers. However, I've ...

Which HTML element should be used: section or div?

One of the pages on my website is a profile page which currently looks something like this: <h1>Foo bar profile</h1> <div> <h2>Address</h2> <p>Foo bar street, 55</p> <p>Foo city</p> </div> < ...

Why is this dropdown list extending beyond the window?

Why is my dropdown list extending beyond the window? Despite trying to change the position of the dropdown list elements to fixed and top:0px, I am still facing this issue! I am unable to figure out why the list is going off the page. Your help in solvin ...

Utilizing JQuery for real-time total updates

When a new div is created by clicking a button, I want to dynamically maintain an order system where the first div is labeled as 1 of 1, then as more divs are added it should change to 1 of 2, and so on. If a div is deleted, the numbering should reset back ...