Determining the Distance Between Two Divs in AngularJS and Concealing the Current Top Scrolling Div

When the user scrolls through the ".all" div, I have a main div in the header and need to calculate the distance between 2 other divs. If the current "elems" div is only partially visible on the screen, I want to hide it.

.main {
    width: 500px;
    height: 100px;
    border: 1px solid;
    float: left;
    clear: both;
}
.all {
    float: left;
    clear: both;
    width: 500px;
    height: 500px;
    border: 1px solid #ff0000;
    overflow: auto;
}
.elems {
    width: 400px;
    height: 200px;
    border: 1px solid #c0c0c0;
}
<div class="main"></div>

<div class="all"><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>

    
<div>

Take a look at this screenshot for reference: https://i.sstatic.net/YjcVR.png

javascriptcssangularjs

Answer №1

Do you mean something like this? If so, I believe your approach is a bit off. It's not recommended to use a bunch of
tags. In my opinion, you should avoid positioning one div on top of another using float:left clear:both.

var mainRef = $("#main")
$(window).scroll(function(){
  $.each($(".elems"),function(index,element){
    if(mainRef.offset().top+mainRef.height() > element.offset().top + element.height() ){
      //DO YOUR STUFF HERE
    }
  })
})
.main {
    width: 502px;
    height: 110px;
    position: fixed;
    top:0;
    background: red;
    left:9px
}
.all div:first-child{
    margin-top:100px
}
.all {
    width: 500px;
    height: auto;
    border: 1px solid #ff0000;
    /*overflow: auto;*/
}
.elems {
    width: 400px;
    height: 200px;
    border: 1px solid #c0c0c0;
}
<div class="main"></div>

<div class="all">
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>
    <div class="elems"></div>

    
<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

"Quotes are essential in Javastript syntax for specifying string values

I need to implement a JavaScript syntax to generate unique URLs for each image. The Robohash website provides random robot images based on different URL endings. I tried the code below, but it seems like ${props.id} is being interpreted as part of the UR ...

javascripthtmlreactjs

Adding embedded attributes from a different object

I am facing a challenge with two arrays called metaObjects and justObjects. These arrays consist of objects that share a common property called id. My goal is to merge properties from the objects in these separate arrays into a new array. const metaObje ...

javascriptramda.js

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

The connection between two arrays remains intact even after using the .push() method in JavaScript or Vue.js

I need help setting up two arrays containing dates. The first array should have the dates in string format, while the second array should contain the same dates but as date objects. methods: { test() { let employments = [ { begin: ...

javascriptarraysvue.js

Issue with Vue.js 2.0 transition not triggering on changing routes dynamically

I've encountered an issue where transitions are not firing on dynamic routes with parameters. For example, when navigating from /chapter/1 to /chapter/2, no transition occurs. However, when going from /chapter/1 to /profile/1, a transition does occur! ...

javascripttransitionvue.jsvue-router

My JavaScript code is functioning properly in jsfiddle, but when I try to run it on my own website, I encounter

Encountered an error message stating "Uncaught typeError: cannot call method 'hover' of null" following the line $('#nav li a').hover(function(){ in my JavaScript code. Check out the code on my site here: http://pastebin.com/GjZBEu3s Y ...

javascriptjquerynull

css - flexible div height based on content

Issue encountered: In my website, I have a dynamically generated content inside a specific div. On the left side of the provided URL, you can see the current appearance of the div. It is worth noticing that the height of the container div (mainContent_mid ...

htmlcssfrontend

Adjust the positioning of several divs using CSS floats

Can the pink div (link3/link4) start at the same top position as the div (link1/link2)? Or do I still need a wrapper div for the left button bar, TreeDiv, and another one for the right button bar + DataGridDiv? CSS html { background-color:Yellow; ...

htmlcsscss-float

"Downloading an image from an encoded base64 canvas triggers an error due to exceeding the maxUrlLength

I'm using javascript to create a canvas drawing on my webpage and then convert it into a base64 image format. After that, I encode the URL of the image to obtain an encoded URL. I came across a post where it was mentioned that using window.location.hr ...

javascriptasp.netbase64html5-canvas

Modifying the design of a webpage using JavaScript, proceeding to the next step, and then navigating back

I am currently working on enhancing the user experience by providing customers with the option to either log in to our booking system or fill out a form with their information. When they first arrive on the page, they are presented with these two choices. ...

javascriptjqueryhtml

What is the best way to incorporate an ng-click into an existing Ionic navigation bar that has already been defined?

Currently utilizing Ionic and AngularJS for my project. The structure of my app consists of tabs, and the tabs.html file is configured as follows: <ion-view> <ion-nav-bar class="bar-positive" align-title="center"> <ion-nav-bac ...

javascriptangularjscordovaionic-framework

After the state loads in Ui-router, how can I execute a function?

Transitioning from jQuery to Angular, I am struggling with ui-router and states. In jQuery, I can make an AJAX call and then run another function on success. How can this be achieved in Angular? For instance, consider the code snippet below: var ivApp = ...

javascriptjqueryajaxangularjsangular-ui-router

HTML5 Adaptive Button Arrangement

I'm working on making my buttons adaptive to screen orientation changes on mobile devices. My goal is to ensure that the website remains user-friendly regardless of how it's being accessed. I know how to adjust button size using CSS in scripts, b ...

javascriptjquerycsshtmluser-interface

The sizing of the SVG element does not dynamically adjust when the window is resized

There appears to be a peculiar issue with the sizing of the rect inside the svg element when the page initially loads. Even when resizing the window, which should resize the svg as well, the width of the rect remains unchanged. However, toggling off and on ...

htmlcsssvg

The function auth.createUserWithEmailAndPassword is not recognized in the context of React

base.jsx: import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { config }; export const app = initializeApp(firebaseConfig); export const auth = getAuth(); Register.jsx ...

javascriptreactjsfirebasefirebase-authentication

Different Option for Ajax/Json Data Instead of Using Multiple Jquery Append Operations

I am working on a complex data-driven application that heavily relies on Ajax and Javascript. As the amount of data returned for certain value selections increases, the application is starting to struggle. This is more of a brainstorming session than a q ...

javascriptjqueryajaxjson

Utilizing jQuery to Manage Trays | Automatically Close Tray on Second click

I am working on a navigation menu with four buttons and a section that contains four additional sections. The functionality I am trying to achieve is that when a navigation button is clicked, a corresponding section slides out while the previous one slides ...

jqueryhtmlcss

Swapping images when hovering over a list item or anchor tag

I recently came across an intriguing issue with changing the img src on a:hover. Check out this SCREENSHOT When hovering over the <a> sector, it's not showing the white image as expected. I have black and white icons, and I want the img src to ...

htmlcsstags

What could be causing the issue with my validation for alphabetical input?

I am currently working on a registration form that only accepts alphabetical input. However, I am facing an issue where my error message appears regardless of whether I input an alphabetical or special character. According to my understanding, the code sho ...

javascripthtmlvalidation

How can Symfony, Jquery, and Ajax work together to append elements to themselves?

I've implemented a jQuery function that dynamically adds rows of data from one table to another table for submission. Essentially, when a user selects an item or items (a row) in the initial table, it gets duplicated in a separate area where they can ...

javascriptjqueryajaxsymfony