I successfully implemented code to make div elements stick at the top with a 64px offset when scrolling. Now, I am trying to also make the opacity of these divs fade to 0 as they scroll. I am struggling to figure out how to achieve this effect. Below is an example of the code I have used so far.
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$(".ComponentOne").css("top",Math.max(64,800-scrollTop));
});
Updated
Give this code a try:
jQuery
$(window).scroll(function() {
var scrollTopValue = $(this).scrollTop();
var offsetTopValue = $('.ComponentOne').position().top;
console.log(offsetTopValue);
$(".ComponentOne").css("top", Math.max(64, 800 - scrollTopValue));
if (offsetTopValue === 64) {
$(".ComponentOne").css("opacity", "0");
} else {
$(".ComponentOne").css("opacity", "1");
}
});
CSS
.ComponentOne {
transition: opacity 500ms ease;
height: 100px;
background: #000;
position: fixed;
left: 0;
right: 0;
}
css
.StylishBox{
height:100px;
width:200px;
background:pink;
position:absolute;
top:800px;
opacity:0;
}
javascript
$("document").ready(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var boxTop = $('.StylishBox').offset().top;
var controlOpacity = 1400;
if(scrollTop + 100 > boxTop)
{
$(".StylishBox").css("top","64px");
$(".StylishBox").css("position","fixed");
$(".StylishBox").css("opacity", ((scrollTop - 800)/(controlOpacity - 800)));
}
if(scrollTop < 800){
$(".StylishBox").css("top","800px");
$(".StylishBox").css("position","absolute");
$(".StylishBox").css("opacity", ((scrollTop - 800)/(controlOpacity - 800)));
}
});
});
Adjust the value of controlOpacity variable as needed. It determines how quickly the div fades out as you scroll. Lower values lead to faster fading, while higher values result in a slower fadeout.
Is there a difference between using left:0; and left:0px;? From what I've noticed, both seem to work fine without any issues in Firefox's error console. Just curious if they have the same interpretation. I am working on some JavaScript that invo ...
Struggling with this code and unable to make it work. This call consistently returns a "Failed to load resource: the server responded with a status of 401 (Unauthorized)" error message. $('#btnZendesk').click(function () { $.ajax({ ...
Is there a way to prevent browser add-ons from injecting HTML code? My website built in angularjs is experiencing routing issues due to certain browser add-ons. The following HTML snippet is causing errors in my angularjs: <script async="" src="http:/ ...
I have a pizza with various toppings. When the user selects "Add Toppings," they appear as drop-down options defaulted to "none." I want to hide the selected "none" options in the cart and checkout. Although I've successfully hidden them on the cart ...
Is there a way to exclude Monday from the "mat-datepicker" component? I've tried implementing the following code in my class component: dateFilter = (_date: any) =>{ let day = _date.getDay(); console.log(day); return day != 1; ...
Incorporating Firebase Cloud Messaging into my project allowed me to send and receive push notifications successfully. While I can receive the push notifications, unfortunately, I am encountering issues with getting the notification events to function prop ...
Here is the code snippet from my webpack configuration file: const currentTask = process.env.nmp_lifecycle_event const path = require("path") const MiniCssExtractPlugin = require('mini-css-extract-plugin') const config = { entry: './ ...
I have researched how to effectively load both prototype and jQuery together, but the solutions I found did not resolve my issue. My current setup involves loading jQuery first, followed by this specific file: http:/music.glumbo.com/izzyFeedback.js, and t ...
I'm currently working on a react-native app and I need to create a layout with components arranged vertically, including a transaction history section. However, I'm encountering an issue when trying to display the transaction history data from du ...
In order to style select tags with Bootstrap, we had to utilize the gem: bootstrap-select However, due to the high volume of options in our data-heavy application, the select dropdowns are causing significant slowdown (loading times, drop down performance ...
I've been developing a portfolio website to showcase my design work, but I've encountered a minor issue. My goal is to have the images load in random positions and then make them draggable using Dragabilly. However, sometimes all the images end ...
** This question is purely hypothetical ** Imagine I have a website with the following code: <head> <style> body { background-color: red; } </style> </head <body> <p>blah</p> </body> If I were to embed th ...
I want to implement a dark theme specifically for the drawer component. In Drawer.js <ThemeProvider theme={theme}> <div> {props.token && ( <Drawer anchor="left" open={props.isDrawerOpen} ...
One scenario I encountered was my attempt to change the background color of the body using style.css, but unfortunately, the code wasn't effective. Below is my reference to Bootstrap 5 and custom CSS: <link href="https://cdn.jsdelivr.net/npm/& ...
As I delve deeper into understanding AngularJS and tackling the intricacies of how $watch operates, a specific scenario has caught my attention. I want to monitor and track changes in the dimensions of the div element with an ID of "area". My intention is ...
As I work on a personal HTML + JS app, the ability to access the content of iframes or opened windows with Javascript would be extremely beneficial in boosting my productivity. I am curious if there is a way to bypass the cross domain restrictions set by ...
In the realm of ajax scripts, I encounter a scenario where referencing something within the same domain requires passing HTML and associated javascript. Due to it being a non X-domain setup, I anticipate that this could be achievable. The aim here is to fe ...
Currently, I am working on a filter feature where I need to append query parameters to the URL based on user selections. If a user chooses a specific option, I want to modify the query string accordingly. Here's an example of my current URL structure: ...
I have been attempting to adjust the paragraph with the errorDate class so that it displays as a block element directly beneath the input element similar to the image provided here. The section is currently set to appear as an inline-flex. Below is the CS ...
I'm attempting to make a button within a table <th> expand to the full width and height of the header column, even if a table cell in the same column is larger than the text. If I set the width to 100% in CSS, the button ends up matching the siz ...