Show another div once you've scrolled beyond the first

Instead of following tutorials that make a div appear after scrolling down a set number of pixels, I am looking to achieve something different. I want a div to appear when the user scrolls past another div, and then disappear again when they scroll back up.

Why not base it on pixel count? I plan to use this for my menubar, which should appear at the top of the page once the user has scrolled past the banner image. However, if the browser window is resized (on mobile, tablet, or small screen), the height of the image will change. This means that using a fixed pixel count would not work, as the timing would be off depending on the size of the image.

I hope someone can provide guidance on how to achieve this unique requirement!

javascriptjqueryhtmlcssscroll

Answer №1

Now that we are having a discussion in theoretical terms, I will do my best to provide an explanation.

Is it possible to obtain the precise location of the targetDiv (the div where scrolling past would reveal the menu bar), and then utilize similar code to have the menuDiv appear after scrolling down a specific number of pixels?

This answer may assist you in determining the current position of the targetDiv.

Answer №2

Follow these steps and let me know how it works out:

1) Download jquery.appear

2) Add the disappear event to your selector:

$('someselector').on('disappear', function(event, $all_disappeared_elements) {
      // this element is now outside browser viewport
    });

3) When that event occurs, hide the other div.

$('theStuffToHide').toggle()

4) Final outcome should be like this:

$('someselector').on('disappear', function(event, $all_disappeared_elements) {
    $('theStuffToHide').toggle()
});

Just follow these steps for the desired effect.

Good luck, I hope this solution works for you.

Answer №3

A simple technique is to monitor the pageoffset compared to a certain threshold (top offset of target + height of target element) in order to display the div.

If the pageoffset drops below the calculated threshold, then hide the div.

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

Create your masterpiece on a rotated canvas

My goal is to draw on a canvas using the mouse, even after rotating and scaling the canvas container. The issue I am facing is that the mouse coordinates get affected by the rotation and scaling, making it difficult to draw correctly. I have tried switch ...

javascripthtmlcanvashtml5-canvas

Is a JS-Native Bridge that works across all platforms?

Currently, I am developing an app that heavily utilizes webviews on both iOS and Android to display content with native chrome around it. I am looking for a way to manipulate this chrome using JavaScript methods. On Android WebView, there is a feature cal ...

javascriptandroidiosmobile-website

What steps should I take to utilize an external servlet that is already in place?

Our form has 2 input fields available for users to enter destinations for flight planning purposes. We are looking to integrate an external servlet that offers autocompletion functionality on the fields. For example, when a user types "LO", the servlet wi ...

javahtmlservlets

Combining Laravel and VueJs for a Multi-Page Application (MPA)

I have recently developed a website using a combination of Laravel and VueJs. However, I am facing some confusion regarding the most suitable routing architecture to implement. Currently, my application has the following setup: The routing system is man ...

javascriptlaravelvue.js

The resizing of the background image is contingent upon the size of the

I am facing an issue with my bootstrap carousel. One of the items only contains a background image without any content. I have set a height for it so that it is still visible even without content. However, when viewing on mobile devices, I can only see a p ...

jqueryhtmlcsstwitter-bootstrap

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

Scripts are only able to close the windows that they themselves have opened as a way to work around

I have been utilizing the reactjs popup library and incorporated the following code: <Popup trigger={<a href="javascript:void(0)">bobby</a>} modal> <button className="close" onClick={close}> &time ...

javascriptreactjspopupnext.js

What will the relationships be like between the models using Sequelize?

Hello there, I'm seeking assistance in establishing the correct associations between models using Sequelize. In my project, I have three types of products, each with unique attributes as well as shared attributes. ...

javascriptnode.jsmodelsequelize.jsnode-modules

What could be causing my website to extend beyond 100% width?

I've been working tirelessly on solving this issue for the past week, but unfortunately, I haven't had any luck finding a solution. The problem arose as I was designing a launch page for a program that my friend is developing. Despite setting the ...

htmlcssweb

Abbreviating AngularJS with JavaScript

While Angular offers the ng shortcut for directives in markup, I am curious about how to implement this in JavaScript code. For example, instead of writing angular.isArray, is it possible to use ng.isArray similar to jQuery ($) or Underscore (_)? ...

javascriptangularjs

Duplicate the identical data retrieval query, this time utilizing a JavaScript Ajax post method

To enhance the data request query, implement a JavaScript Ajax post method to avoid page refresh when the button is pressed. This will allow for requesting another page and displaying it in a designated section on the webpage. Here's the code snippet ...

javascriptphpmysqlajax

Using Polymer to automatically update the DOM when a JSON file is modified

I am currently developing a modal window to add data to a JSON file and then display that data in the DOM. The issue I'm facing is that while the data gets saved to the file successfully, it doesn't reflect immediately on the DOM. The technology ...

javascriptjsonpolymerpolymer-1.0polymer-elements

Guide on transferring JSON information from a client to a node.js server

Below is the code snippet from server.js var express = require("express"), http = require("http"), mongoose = require( "mongoose" ), app = express(); app.use(express.static(__dirname + "/client")); app.use(express.urlencoded()); mongoose.con ...

javascriptjsonnode.jsmongodbexpress

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

javascripthtmlbootstrap-4

Adding information into MongoDb with the help of mongoose

I am currently working with an array of strings and my goal is to iterate through this array and update my collection with its values. This is the approach I have taken: if (employees) { employees.map((employee) => { Employee.updateOne({ ...

javascriptmongodbmongoose

Is there a way for me to retrieve the locator value of a webelement?

How can I retrieve the selector value used in a selenium webelement in javascript? Let's say I have the following object: var el = browser.driver.findElement(by.id('testEl')); I want to extract the text 'testEl' from this object ...

javascriptseleniumprotractor

``Unusual padding for the body in VueJS and Nuxt, with a touch of CSS

I am currently working with VueJS + NuxtJS and have implemented a background gif. Right now, the code looks like this: body { margin: 0 auto; background: url("assets/video/background-darked.gif") no-repeat center center fixed; -webkit-backg ...

javascripthtmlcssvue.jsnuxt.js

Ways to expand HTML input fields to fill the whole table cell

Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting widt ...

htmlcss

Engage the PROTRACTOR refresh function

I'm just getting started with automation and Protractor. I successfully automated the login page, but now I'm facing a challenge with accessing a menu that I need in order to navigate to a different page. Within the menu, there is an href="#/dom ...

javascriptcssangularjsprotractor

Sending data with the request body using Express and Passport

I've created a login application using Express and Passport, but I'm having trouble directing the user to their specific user profile page. The goal is for users to fill out an HTML form and then be redirected to their own profile page (which dif ...

javascriptnode.jsexpressauthenticationpassport.js