Tips for halting the scrolling of a div once it reaches a particular point

When I click a button, a pop-up appears. My goal is to prevent this pop-up from scrolling when it reaches the menu on my website.

Here is the code snippet:

<div id="dialog_box" class="dbox" style="display: none; position: fixed;                
right: 192px ! important; z-index: 1000; top: 0px;">

I am attempting to stop the scrolling of #dialog_box when it reaches the div with the ID #menu using jQuery or JavaScript.

So far, my attempts have not been successful:

jQuery(window).scroll(function(){
   jQuery('#dialog_box').scrollTo('#menu'); // I want to halt scrolling when dialog_box reaches #menu.
   jQuery("#dialog_box").css("top", Math.max(0, 162 -    
      jQuery(this).scrollTop()));  // I tried positioning dialog_box from the top but it did not give me the desired outcome.
});
javascriptjquerycss

Answer №2

If you want to implement a JavaScript code snippet, consider the following approach:

var box = $("#box");    
box.on("scroll", function(event) {  
    if (this.scrollTop > 100) {
        box.addClass("new_class_name");
    } else {
        box.removeClass("new_class_name");
    }
});

In your CSS file, include the styles for the new class name:

.new_class_name{
    position: fixed;
    top: 10px;
}

Give this method a try and see if it meets your requirements.

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

The footer that constantly changes

I am looking to dynamically position my footer at the bottom of the page. The footer should be fixed at the bottom. If the page content exceeds the viewport, the footer should automatically adjust its position. html { position: relative; m ...

htmlcssfooter

Rails triggers the "ajax:success" event multiple times

I'm working on a project to display user's following and follower list similar to Instagram: https://i.sstatic.net/G8hjS.png This is my controller: def create @relationship = current_user.active_relationships.new followed_id: @user.id i ...

jqueryruby-on-railsajaxujs

The route function is not being executed

I'm currently developing a straightforward restaurant web application that utilizes a mongo-db database to manage the menu items. The problem lies with my client js file, which is supposed to utilize a routing function to access the database and retri ...

javascripthtmlserver

Invalid JSON value returned as 'undefined'

Just diving into the world of json! Encountered a small problem. I have a feed that returns the string "undefined" if there is no data for commentnotes. I simply want to get rid of the "undefined" and make it empty instead. Below is my JavaScript code: ...

javascriptjson

What could be causing this hydration error in NextJS in the development server build but not in the production build?

By using the create-next-app command and implementing this code snippet, a hydration error occurs on the client side when running the next dev server. The code in pages/index.js: export async function getServerSideProps(context) { const x = Math.random( ...

javascripthtmlnext.jsserver-side-renderingdangerouslysetinnerhtml

Unable to send an API request from Postman to a database through express and mongoose technology

This is my server.js: const express= require('express'); const app = express(); // const mongoose= require('mongoose'); // load config from env file require("dotenv").config(); const PORT = process.env.PORT || 4000; // middl ...

javascriptnode.jsmongodbexpresspostman

Exploring nested JSON arrays with jquery to retrieve information

My current challenge lies in accessing specific values within a nested array. Here is the structure of the array: [{ "call_sign": "KTAB-TV", "facility_id": "59988", "operator": "Nexstar Media Group Inc", "programming_class": [{ "pr ...

jqueryjsonajax

Tomcat hosting a dynamic duo: Spring Boot and React!

Exploring the world of Spring Boot application development with a React client using Gradle is an exciting journey for me as I navigate through these new technologies. My current progress includes successfully creating a WAR file that encompasses several i ...

javascriptspringreactjstomcatweb-deployment

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

javascripthtmlcsslayoutbootstrap-4

What are some creative ways to incorporate images into SVG paths?

Check out my JSFiddle here. I'm attempting to position this image in the center of my arc. My initial thought was to use .attr("fill","url('somePicture')"), but so far, no luck with that approach. const width = 700; const height = 600; con ...

javascriptjqueryhtmlsvgd3.js

Adding a variety of data types to a MongoDB collection through Node.js

I'm currently using the Sails web framework along with Node.js and MongoDB to develop my own website. I am encountering some challenges while attempting to add a new user and input values (of different types: Number, Array, Object) to my 'users&a ...

javascriptnode.jsmongodbpostmansails-mongo

What is the process of transferring information from an AngularJS factory to a controller?

I am trying to access raw data object from an angularJS factory that serves as a dataSource for a kendo grid. Despite being able to console log the data in the factory, I'm facing difficulty populating the data object in the controller. How can I retr ...

javascriptangularjskendo-grid

Fulfill the promise within the $stateProvider and proceed with utilizing the outcomes

I am facing an issue where I need to resolve a promise in a state provider so that I can use the results of the promise in another promise. I am a bit unsure about how to go about this. I tried the following approach: app .config(['$stateProvid ...

javascriptangularjspromise

What is the best way to delete comments from the config.js file?

I'm looking for a way to remove comments from my config.js file, which is acting as a JSON file in my project. The config file has both single line comments like this: //comment goes here and multi-line comments like this: /* comments goes here */ ...

javascriptjsonnpmstrip

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

javascriptcssangularjsangular

unable to detect image input type

My dilemma lies in trying to submit a form using an image input type. The ajax request works as expected, and I receive a response from my php script. However, I encountered an issue where the image button was not changing its image upon submission. Accord ...

javascriptjqueryhtmlajaxforms

Retrieve the values from multiple columns within a jqgrid row

Is it possible to retrieve both the first column value and the second column value from a jqgrid row? In my other program, I am currently using this code to obtain the first value of the row: $("#tblTallySheet").jqGrid('getGridParam', 'selr ...

javascriptjqueryjqgrid

Does jqgrid navgrid have an event called "on Refresh"?

Is there a way to trigger an event before the grid automatically refreshes? I am looking for something similar to "onSearch" but for the reset button. Below is the code snippet for the navgrid: $("#jqGrid").jqGrid('navGrid','#jqGridPag ...

javascriptjqueryjqgrid

Sending JSON Data from Angular2 Component to Node.js Server

Currently, I am facing an issue where I am unable to successfully insert data into a database using Angular2 and Node.js. Upon running my script, I use console.log(this.address); to verify that I am passing json, and the output in the console is as follow ...

javascriptjsonnode.jsangular

Having Trouble Loading a Basic Scene in Three.js

I'm struggling to set up my HTML page with the basic scene because nothing is appearing. I can't seem to locate the required three.js file that I'm supposed to include in my js folder for referencing it as mentioned in the documentation (lin ...

javascriptthree.js