How can I make the top two divs stay fixed as I scroll down, and then reset back to their initial position when scrolled

Hey there, I'm looking to have a div stay fixed after scrolling within its parent div.

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="fw ofndr-box">
      <div class="ofndr-box-half add-here">
        <a href="#!/lead-court/5c0622ad78bdba5f566538d8" style="color: white;">Header 1</a>
      </div>
      <div class="ofndr-box-half2 add-here">
        <a href="#" data-ng-click="addrequestpopup()" class="ofndr-btn pull-right">+New</a>
      </div>
      <div class="fw ofndr-box-in">
      </div>
</div>
</div>

I've included a link to my working fiddle above. In the fiddle, I aim to make the header and +new button remain fixed after scrolling inside the blue colored div. Link to Fiddle

Answer №1

When the scroll is on the element with the class ofndr-box instead of the window, you can use the following JavaScript code:

var scrollPosition = $('.ofndr-box').scrollTop();

Also, make sure to change:

$(".add-here").addClass(".fixed");
to
$(".add-here").addClass("fixed");

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

Looking to duplicate the elements with the click of a button?

I am in need of assistance with my registration form. My goal is to move the elements contained within the <fieldset> tags to the end of a row when the user clicks the + button. The result you see initially has been recreated. Thank you for your s ...

What are some tips for increasing your points on the journey using Here Maps?

While plotting a route, I noticed that the segments on highways are quite far apart. Is there a way to get a more detailed routing with finer points along the journey? $.ajax({ url: 'https://route.cit.api.here.com/routing/7.2/calculateroute ...

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

Challenges with setInterval and asynchronous requests

Currently, I have an ajax call set to run every 10 minutes using setInterval. This call fetches new post data from a PHP page and stores it in a variable. To load this new post data, I simply click on a link which then prepends the data to the page. The p ...

Vertically align the text

Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

Issue with Jquery modal not functioning properly on second attempt

Currently, I am working on developing an application using CodeIgniter. However, I have encountered a problem where the modal window does not open for the second time. Here is a more detailed explanation of the issue: The form (view) in question contains ...

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

Is there a way to display a loading image and disable a button for 3 seconds before sending post data from another page using AJAX POST? Once the OK button is clicked, I would like the loading image to appear and the <input type="button" value="Check" ...

Creating a design with multiple `<thead>` and `<tbody>` elements

Seeking advice on usability and design elements. I am currently utilizing JQuery to hide/show entire sections within a single large table structure. The layout consists of multiple thead sections, with the main header at the top, followed by sub-headers fo ...

Techniques for transferring PHP print_r arrays to Javascript

Array ( [0] => Array ( [sno] => 1 [name] => Sivamani [contact] => 750241378 [$city] => Madurai ) ) Array ( [1] => Array ( [sno] => 2 ...

The system encountered an error stating that the required component "Footer" in the main directory was not located in the specified node_modules

Issue I'm Facing: Error found in components/main/Footer within the file path: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue Components Tree as shown in the screenshot below: Cod ...

AngularJS RESTful Routing Masterclass

I am in the process of organizing my application using the Restful/Ruby convention /<resource>/[method]/[id]. In the past, when working with a server-side MVC framework like CodeIgniter, I would dynamically route based on the URI: For example: www. ...

Unable to retrieve static files

I'm trying to incorporate the Jquery-ui datetime picker into my express js application, but I encountered a 404 error. <p>Date: <input type="text" id="datepick"></p> <link rel="stylesheet" type="text/css" href="stylesheets/jquery ...

Automatically fill in a text field based on the selection from a drop

I need to automate the process of filling in text boxes on a page based on what the user selects from a dropdown menu. When the user changes their selection from the dropdown list, I want the corresponding text box to update with the value associated with ...

Maintain the visibility of the Jquery modal regardless of page loading

Hello, I am just getting started with jQuery and have encountered an issue. When I try to display a jQuery modal on the click of an Upload button, it disappears immediately because of the page load. I would like the modal to stay visible until a button wit ...

How can I achieve a letter-spacing of 0.5 pixels in CSS?

Encountering an issue, I set out to enhance readability by adjusting letter-spacing to 1px. Displeased with the result, I attempted a half pixel spacing of 0.5px but found it ineffective. Subsequently, I experimented with em attributes but failed to accomp ...

Can a string or javascript object be uploaded without being saved in a file? - IPFS

I've been exploring the capabilities of js-ipfs API and I'm curious to know if js-ipfs is limited to only uploading files/folders. Is there a way to upload other types of data, such as a JavaScript object like: { heading:"SomeHeading", c ...

What is the best way to determine if an image already exists in a database where the objects are spread across two distinct SQL tables?

Currently, I am working on a project using classic ASP and SQL. In this project, I have an input box where the image name is entered by the user after clicking the "Update" button. Upon clicking the update button, pre-existing images are displayed in a tab ...

URL from different domains

Currently, I am attempting to utilize this URL within my javascript code: Below is the snippet of my javascript code: $.ajax({ url: 'http://api.addressify.com.au/address/autoComplete', type: 'GET', crossDomain ...

Apply a Fade In transition to the ul li elements following a JavaScript toggle

I'm currently experimenting with implementing a Fade in from the right animation for the links displayed in the menu after toggling the menu body in the browser. Despite my efforts, I am unable to determine why the animation is not functioning as expe ...