Can CSS be used to make a div move along with the screen as the user scrolls (similar to 'fixed' positioning), but then stop when it reaches another div and jump over it if the user continues scrolling?
For example, imagine you have 3 divs with significant text content - is it feasible for a div to dynamically slot itself under each of these divs as the user scrolls down?
For a solution, I recommend utilizing https://github.com/brandonaaron/jquery-overlaps. Here is an example of how you can arrange the moving div:
$(window).scroll(function() {
var movingDiv = $('.moving-div');
if (movingDiv.overlaps('.static-div')
&& !movingDiv.hasClass('slotted')) {
$('.static-div').before(movingDiv);
movingDiv.css('position', 'static');
movingDiv.addClass('slotted');
}
});
This code serves as a starting point and it's essential to implement a function for "unslotting" the moving div as well.
Perform the calculations using an invisible placeholder object with similar properties to the actual one.
$(window).scroll(function(){
var b1_fo = $("#dummy").offset().top + $("#dummy").height();
var b2_fo = $("#b2").offset().top + $("#b2").height();
if( b1_fo > $("#b2").offset().top && b1_fo < b2_fo + $("#dummy").height()){
$("#b1").css({top:$("#b2").offset().top - $("#b2").height(),position:'absolute'})
} else {
$("#b1").removeAttr('style')
}
})
See it in action: http://jsfiddle.net/LpULy/
If you're looking for a solution, I recommend utilizing https://github.com/brandonaaron/jquery-overlaps and then implementing something similar to this code in order to position the moving div:
This code serves as a guide and it's important to establish a function for "unslotting" the moving div as well.
I trust this information will prove valuable. Thank you
Here is the original HTML code with "radio" buttons: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyM ...
I have been experiencing an issue related to making a Post request to the Github API for creating an issue. I have gone through this post on Stack Overflow but I am seeking assistance in using the request module. Although I have referred to the Github docu ...
Having an issue with a particular style here. There's a div containing the string "Historic" that has a CSS transform rotate applied to it and is positioned in relation to another sibling div. When I change the string to "Historique" for international ...
I've been attempting to create a jumbotron bootstrap element that spans the full width of the page. I've tried using both col-xs-12 and the w-100 classes, but it doesn't seem to have any effect. Could someone provide guidance on how to adju ...
Is it possible to undo a previous css 'transform' applied to an element and apply a new rule? Although we often use '!important' in css to override rules with higher priority, it seems that '!important' is not working on a tra ...
I have created code that allows me to input an mp3 file, output the audio, and display a visual representation of the music. Currently, loading the file is done manually through an input type="file". Now, I want to change it so that the music automaticall ...
After transitioning from Webmethods 7 to Webmethods 8, I noticed that my portlets now have unwanted horizontal scroll bars at the bottom. Is there a way to remove them? Would CSS be able to solve this issue? Any advice would be greatly appreciated! ...
I have set up a project using React/NextJS with Typescript and now I am incorporating unit testing with Jest and React Testing Library. One of the unit tests for my component is as follows: import React from 'react'; import '@testing-libra ...
I've tried multiple solutions from various sources, but I'm still struggling to remove an image from a dialog. Whenever I attempt to do so, I end up with multiple images instead of just one. It's important to note that I only want the image ...
I have an object containing longitude and latitude coordinates? data(){ return{ center2:{lat:0,lng:0} } } I am attempting to watch these values but it's not working as expected watch:{ "center2.lat":function (newValue, oldValue) { ...
My current challenge is figuring out how to retrieve the name of a React component. I initially attempted using the this.constructor.name property, but discovered that it doesn't function properly in production mode due to code minification by Webpack ...
I'm having trouble using FormData on Next.js to upload an image to the server as I keep getting this error. I've tried various solutions but haven't been able to resolve it yet. This is my code: const changeValue = (e) => { if (e.target ...
I'm currently designing a homepage for a press release. I'm facing an issue with a large gap between my content and the footer, which I'd like to reduce. I've tried adjusting the margin-top: 0px in CSS with no success. Various attempts ...
Having just started learning HTML, CSS, and PHP, I find myself in need of assistance. Despite extensive research online, I have hit a dead end and cannot seem to find any productive solutions. Any guidance or suggestions would be greatly appreciated! I am ...
Currently, I am incorporating an Ajax request into my Java Maven project. This project follows the MVC pattern, with the view being rendered in HTML and the model and controller being implemented in Java. My goal is to retrieve data from a data set contain ...
I am facing a challenge with my web page where I need to dynamically attach ng-model attributes to some HTML elements that I don't have the ability to edit. What I want to achieve is to have AngularJS re-bind these attributes to the scope. You can fin ...
Using the JavaScript serializer to send data to JavaScript: var jsSerializer = new JavaScriptSerializer(); var result = (from c in dt.AsEnumerable() select new { Latitude = c.F ...
Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...
The issue lies not in the counting itself, but rather in setting the key-value pairs. Here's the snippet of code: <?php $jsonPacks = '{ "pack": [ { "container": 50, "layout": [ ...
Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...