The div element is supposed to only be visible when the user scrolls down and then back up, rather than when the

Looking for some help with a Javascript issue on my website (http://www.pjsmusic.com). I need a div of 200px to appear when the user scrolls down 40px. I have tried using the following Javascript code:

$(document).scroll(function() {
    $('#jerkBox').toggle($(this).scrollTop()> 40);
});

The problem is that the div appears when the page loads, even if it hasn't been scrolled from the top. How can I make the div appear only when the user scrolls 40px down, and disappear when they scroll back up past 40px, without showing on load? If you visit the link, you'll see what I mean. Thank you for any assistance!

javascripthtmlcssscroll

Answer №1

The JQuery method called .toggle() is used to manipulate the display property of an element. One way to initially set it to not display is by adding the following CSS:

#jerkBox {
    display: none;
}


$(document).scroll(function() {
    $('#jerkBox').toggle($(this).scrollTop() > 40);
});
#jerkBox {
    float: right;
    width: 200px;
    height: 200px;
    background: red;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="jerkBox">
    jerkBox div
</div>
<div style="height: 2000px">
    
</div>

Answer №2

To start, simply hide the element with the ID #jerkBox by default. This can be achieved by adding the CSS style display: none to the element, or by hiding it immediately when the document is ready in your script.

/* CSS */
#jerkBox {
  display: none;
}

Alternatively

/* JavaScript */
$(document).ready(function() {
  $('#jerkBox').hide();
}

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

Removing scrollbar from table in React using Material UI

I successfully created a basic table using react and material UI by following the instructions found at: https://material-ui.com/components/tables/#table. The table is functioning properly, but I am finding the scrollbar to be a bit inconvenient. https:// ...

htmlcssreactjstypescriptmaterial-ui

Leverage PHP to integrate JSON data for consumption by JavaScript

I've been exploring the integration of React (JavaScript) within a WordPress plugin, but I need to fetch some data from the database for my plugin. While I could retrieve this data in JavaScript using jQuery or an API call, because the data will remai ...

javascriptphpreactjsjsonwordpress

How can I create a "suggest" command using Discord.js?

How can I improve my Discord.js code for a suggest command that handles two types of suggestions - support server and bot? Currently, my code is not working as expected. Here is what I have: if (command === "suggest"){ const type = args.join(" ") ...

javascriptnode.jsexpress

Resolved navigation bar problems

As a beginner in web development, I am working hard to launch my first website. Today, I have a question for the stack overflow community regarding a fixed navbar issue. The navbar I have created is functioning properly on Chrome, but when it comes to Fire ...

phphtmlcssnavbarfixed

"Exploring the power of NodeJS with createServer, dealing with

Can instances of global.request potentially collide in this NodeJS scenario? I have a basic web server set up in NodeJS where I am globally exposing the request that is created: http.createServer(function(req, res) { global.request = req; // do ...

javascriptnode.js

Guide for displaying retrieved information on a Bootstrap Modal window following data submission in Yii2

I'm encountering an issue with a Modal popup that contains two fields. The first field is used to submit information and perform an internal database query, while the second field should display the returned data. Oddly enough, when testing the functi ...

javascriptajaxyii2pjax

What is the reason behind VueJs not having built-in support for multiple select options?

Recently delving into the world of vue, I encountered a challenge while working on an update form. When trying to pre-select multiple options using the selected attribute, I noticed that only the last option was being selected. Upon further investigation, ...

javascriptvue.jsvue-componentvue-multiselect

Layer several divs inside a main div

I'm grappling with a simple issue and could use some help to resolve it. Utilizing bootstrap, below is my CSS and div structure. How can I achieve an overlap of DIV 1, DIV 2, and DIV 3? Essentially, I want to position them on the same level, one behi ...

htmlcss

Is there a way to stack multiple Divs on top of each other using Float instead of relying on absolute positioning?

I've decided to revamp my approach and transition from using absolute positions to utilizing floats for positioning elements the way I desire. Now the challenge lies in figuring out how to float multiple divs on top of each other, allowing users to s ...

htmlcss

A tutorial on utilizing a bundle in webpack based on certain conditions

My project consists of an app.bundle.js (the main app bundle) and two cordova bundles: iosCordova.bundle.js and androidCordova.bundle.js. Depending on whether the user is logging in on an iOS or Android device, I only script src one of them. All the bundle ...

javascripthtmlcordovawebpackwebpack-dev-server

The Bar Graph Transition in d3 is Running Backwards

Learning to code has been a fascinating journey for me, but I must admit that JavaScript presents a unique challenge. Currently, I am working on creating a d3.js Bar Chart and I wanted to include a transition effect when the bars load. However, I have enco ...

javascripthtmld3.jstransition

issue arising from integrating material-ui components with code in a react javascript application

Struggling with integrating code and material-ui components in react jsx, I encountered an issue. Here's the problematic snippet: const icols = 0; const makeTableRow = ( x, i, formColumns, handleRemove, handleSelect) => <TableRow key ...

javascriptreactjsmaterial-ui

Arranging Fancybox images into categories

I am currently experimenting with the fancybox function. It seems to be working fine, but for some reason it is not grouping up based on my Rel attribute. Below is the JavaScript code: <script type="text/javascript"> $(function($){ var ...

jqueryhtmlfancybox

JS glitch leading to oversized window dimensions - Issue with dropdown menu

I recently integrated a dropdown into my website using Foundation CSS. To see the dropdown in action, you can login with the credentials provided (username: stackoverflow password: testtest) on . However, I noticed that when logged in, the page on the rig ...

javascriptcss

When the user saves the changes on the pop-up window, the main window will automatically refresh

I currently have a calendar feature that allows users to create, edit, and delete appointments. When a user clicks on the new appointment button, it opens a window above the calendar interface. Once the user fills out the necessary fields and clicks save, ...

phpjavascriptjquerymysqlhtml

Guide to accessing URL or parameters in the directory of a NextJs 13 application

Transitioning my getserversideprops() to next13, I am faced with the task of incorporating URL and fetching parameters from the directory structure. In my page path /posts/{postId}, how can I retrieve params or the URL? The code snippet I am currently work ...

javascriptnext.js

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

csscss-position

What is the best way to maintain whitespace in CSS while disregarding line breaks?

The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary. However, there is c ...

htmlcss

I am experiencing issues with my Ajax code where it is not successfully sending data to the server and

Can someone help me troubleshoot my PHP AJAX code? I am new to PHP and just getting started with learning AJAX. index.html: <html> <head> <script> function sendmessage(str) { var xmlhttp; if (window.XMLHttpRe ...

phphtmlajax

Transferring image data to a different webpage

Currently, I am facing an issue with obtaining image data from a camera and photo album on a mobile device. Although I have successfully retrieved the chosen image using the provided code snippet below, my dilemma lies in transferring this image data to an ...

javascriptjqueryhtmlimagemobile