How to create a scrolling effect that fades a pseudo element using either JavaScript or jQuery

Question

How to create a scrolling effect that fades a pseudo element using either JavaScript or jQuery

Seeking help on how to fade a pseudo element to opacity:0 on scroll has left me feeling lost and frustrated. I've included my codepen for reference here: http://codepen.io/emilychews/pen/JWyaKr

Unfortunately, Greensock is not an option for this project, and I must use a pseudo element rather than an absolutely positioned div. The desired effect is for the fade to occur after 10px of scrolling from the top, with the element reappearing when the user scrolls back up (part of a navigation element).

HTML

<div id="mydiv">My Div</div>

CSS

#mydiv {
    background: red;
    width: 10%;
}

#mydiv:after {
    content: '';
    position: absolute;
    height: 10%;
    width: 10%;
    top: 30px;
    background: black;
}

I would greatly appreciate any suggestions or assistance. Right now, I feel like I'm at a breaking point and could either burst into tears or devour a bucket of fried chicken in frustration.

Sincerely, Emily

javascript jquery css pseudo-element

Answer 1

Answer №1

Implement a smooth transition effect for the opacity property on a pseudo element by adding a specific class to the main element when scrolling occurs. This class will be used in the CSS selector to control the opacity of the pseudo element.

var $mydiv = $('#mydiv');
$(window).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $mydiv.addClass('fade');
  } else {
    $mydiv.removeClass('fade');
  }
})

body {
  height: 200vh;
}

#mydiv {
  background: red;
  width: 10%;
}

#mydiv:after {
  content: '';
  position: absolute;
  height: 10%;
  width: 10%;
  top: 30px;
  background: black;
  transition: opacity .25s;
}

#mydiv.fade:after {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">My Div</div>

Answer 2

Implement a smooth transition effect for the opacity property on a pseudo element by adding a specific class to the main element when scrolling occurs. This class will be used in the CSS selector to control the opacity of the pseudo element.

var $mydiv = $('#mydiv');
$(window).scroll(function() {
  if ($(this).scrollTop() > 10) {
    $mydiv.addClass('fade');
  } else {
    $mydiv.removeClass('fade');
  }
})

body {
  height: 200vh;
}

#mydiv {
  background: red;
  width: 10%;
}

#mydiv:after {
  content: '';
  position: absolute;
  height: 10%;
  width: 10%;
  top: 30px;
  background: black;
  transition: opacity .25s;
}

#mydiv.fade:after {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv">My Div</div>

How to create a scrolling effect that fades a pseudo element using either JavaScript or jQuery

Answer №1

Similar questions

Sending data from Vue js 2 to a JSON object

Struggling with D3.js Angular CLI where Scope disappears within the tick() function?

Using Modal Functions in AngularJS Controller

Managed the double-click event to select Snap.svg text

Enhancing the Google Visualization Table with Custom CSS

Creating figures within an elliptical boundary

Tips for making sure a header is consistently at the top of every page during printing

Using Django in combination with the JQuery $.post() function

Adding text over an image in Tailwind without the need for absolute positioning is achievable

Transfer PDF file to user's web browser through XMLHttpRequest, utilizing up-to-date HTML5 techniques, all while maintaining the integrity of the document's encoding

Struggling to transfer an image to a Linux server using Phonegap and PHP

Using play() in HTML Audio prevents the IOS music player from playing

Every time I hit the refresh button, I find myself forcefully logged out

Issue with rendering in React was encountered

Acquire the Information from a Textarea That Has Been Edited by the User

I'm having trouble locating the documents I recently saved in my mongoose model

Utilize a fusion of various subjects and observables

Sending a model from a View to a boolean method using AJAX in ASP.NET MVC

The columns in Bootstrap 4.00 are staying on the same line and not wrapping to a new line

A guide on incorporating a customized Google map into your website