Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/

I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth transition to full opacity when entering the box.

I suspect achieving this solely with CSS might not be possible, so I am in the process of learning jQuery and JavaScript. Any help is appreciated!

As an additional question: How will this functionality impact mobile users? I want to ensure that this effect is only present on desktop and other devices while maintaining a constant opacity of 1 on mobile. 

.box{
            height:500px;
            width:100%;
            background:gray;
            font-size:20px;
            overflow:auto;

        }
        .box p{
            opacity:.5;
        }
        .boxtwo{
            height:100px;
            width:100%;
            background:red;
            opacity:.5;
        }
        .make-me-solid{
            position:absolute;
            top:0;
            height:400px;
            width:100%;
            border:1px solid black;
        }

        body,html{
            margin:0;
            padding:0;
        }
<div class="box">
         <div class="make-me-solid"></div>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
          </p>
          <div class="boxtwo"></div>
            <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
          </p>
            <div class="boxtwo"></div>
            <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
          </p>

        </div>
javascriptjqueryhtmlcss

Answer №1

It seems like you attempted to achieve a similar effect, but the approach should be reversed and using opacity may not be the best choice.

You can easily deactivate any CSS through media queries

.box {
  height: 500px;
  width: 100%;
  background: gray;
  font-size: 20px;
  overflow: auto;
}
.box p {
  opacity: .5;
}
.boxtwo {
  height: 100px;
  width: 100%;
  background: red;
  opacity: .5;
}
body,
html {
  margin: 0;
  padding: 0;
}
html:after {
  content: '';
  pointer-events: none;
  bottom: 0;
  height: 15vw;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9));
}
<div class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue...

Answer №2

If my understanding is correct, I would recommend the following jQuery code snippet for your consideration.

This code snippet is designed for mouse hover interactions, but if you require a different functionality, please let me know.

For mobile connections, you can set the opacity to a fixed value of 1.

$(function () {
  $('.boxtwo, make-me-solid').hover(
    function(e) {
      $(this).stop().animate({'opacity': 1}, 500, function() {
        $(this).css('opacity', 0.5);
      });
    },
    function(e) {
      $(this).stop().animate({'opacity': 0}, 500);
    });
});
.box{
  height:500px;
  width:100%;
  background:gray;
  font-size:20px;
  overflow:auto;

}
.box p{
  opacity:.5;
}
.boxtwo{
  height:100px;
  width:100%;
  background:red;
  opacity:.5;
}
.make-me-solid{
  position:absolute;
  top:0;
  height:400px;
  width:100%;
  border:1px solid black;
}

body,html{
  margin:0;
  padding:0;
}
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<div class="box">
    <div class="make-me-solid"></div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
    </p>
    <div class="boxtwo"></div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
    </p>
    <div class="boxtwo"></div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sodales quam quis dapibus congue. Praesent efficitur odio quis est sodales, id sagittis nisl euismod. Sed lacinia, enim vitae interdum imperdiet, quam lacus vehicula eros, eu feugiat ligula risus at justo. Morbi id varius diam. Nullam risus neque, porta eu nisl id, rhoncus malesuada justo. Sed a arcu hendrerit, fringilla nulla id, fringilla nisl. Suspendisse vehicula sollicitudin lacinia. Proin quis nibh efficitur, consectetur lectus at, eleifend purus. Nullam finibus libero eget ante venenatis finibus. Phasellus ultrices magna non maximus imperdiet. Vestibulum euismod rhoncus tortor, eu tincidunt leo placerat et. Vestibulum convallis dapibus turpis ut consequat.
    </p>

</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

Guide to dynamically altering the header logo as you scroll further

I'm attempting to dynamically change the logo in my header based on how far I've scrolled down the page. While I have experimented with libraries like Midnight.js, I specifically need to display an entirely different logo when scrolling, not just ...

jqueryhtmlcssheader

Display the element following a specific component while looping through an array in Vue.js

Currently, I am facing an issue while using a for-loop on the component element. My goal is to display a <p> element next to the <component> element during the loop's third iteration. The challenge lies in accessing the iteration variable ...

javascripthtmlvue.js

How to utilize the CSS hover feature within an Angular directive?

Presented here is the default directive. import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; @Directive({ selector: '[newBox]' }) export class BoxDirective { @Input() backgroundColor = '#fff'; con ...

cssangularangular2-directivesangular-directive

Saving the initial and final days of each month in a year using javascript

I am trying to create an array of objects that contain the first and last day of each month in the year. I have attempted a solution but have hit a roadblock and cannot achieve the desired results. module.exports = function () { let months_names = ["j ...

javascriptnode.jsmongoose

What is the best way to remove horizontal scrolling and reduce element size on mobile devices?

My current project is utilizing the Material-ui framework, and I have a situation where numerous anchor elements are being displayed as a table within a Paper component from mui. However, due to the length of this table, it causes a horizontal scroll bar t ...

cssreactjsmaterial-designmaterial-ui

What is the best way to ensure that each service call to my controller is completed before proceeding to the next one within a loop in Angular?

Calling an Angular service can be done like this: this.webService.add(id) .subscribe(result => { // perform required actions }, error => { // handle errors }); // Service Definition add(id: number): Observable < any > { retu ...

javascriptangulartypescriptcallback

Ensuring Uniqueness of Usernames through Client-Side Validation in

Looking to implement client-side validation for a username field during user registration to check if it is available before form submission. Using jQuery validate for basic client-side validations: http://jqueryvalidation.org/ Seeking advice on how to a ...

jquerypythondjangovalidation

Creating an HTML layout or template directly within a JavaScript bookmarklet

Currently, I am using a bookmarklet that generates a user interface for interaction. The method I have been using involves creating elements using $('<element>').addClass().css({..});, but this approach is proving to be difficult to maintai ...

javascripthtmltemplate-enginebookmarklet

Obtain the URL path for accessing URL links using PHP

To obtain the URL of an image, I typically use this code on the main websites: <a href="./index.html"><img src="./images/logo.png" class="" alt=""></a> However, for sub-sites, I need to use a slightly different approach: <a href=".. ...

phphtmlheaderfootergeturl

html transparent div element

I'm encountering an issue with this specific code snippet: <li class="nav-item dropdown" id="noti_Container" > <div id="noti_Counter" style="opacity: 1; top: -2px;"></div> <a style=" ...

htmlcssopacitytransparent

Utilizing JavascriptExecutor in Powershell

I've been working on a series of Powershell scripts that utilize the Selenium Webdriver. Now, I am looking to incorporate some JavaScript functionality into one of them. However, I am struggling to understand how to get the syntax right. I tried ada ...

javascriptpowershellselenium

Bootstrap is designed to dynamically adjust to the size of the browser window, ensuring a smooth

After completing the construction of a new website, I encountered an issue where the styles and layouts are responsive when adjusting the browser window size. However, upon opening responsive inspect tool, no changes occur - columns refuse to break and t ...

htmlcsstwitter-bootstrapresponsive-design

Encountering difficulties when trying to send requests to an API through AJAX

Our company relies on the software nocrm.io for managing leads and customers. I am looking to integrate their API into our web application to streamline information exchange through GET and POST requests. However, I am facing challenges while trying to mak ...

javascriptjqueryreactjsexpress

The use of p-message in Angular's PrimeNg library is not permitted

Hey there, I'm having a bit of trouble with the p-message Tag in Angular. I believe I've imported it correctly as shown below. import { MessageModule } from 'primeng/message'; imports: [ .... MessageModule, ... In the ...

javascriptangulartypescriptprimengprimeicons

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

htmlcss

What methods does Express use to precisely measure time intervals shorter than 1ms?

Recently, I started delving into the world of Express, a web framework for Node.js. While experimenting with it, I noticed that whenever a webpage rendered by Express was refreshed, a series of log messages appeared on my Linux console, as shown below: GE ...

javascriptnode.jsexpressloggingtime

Leverage the power of lodash or es6 by creating a custom function that accepts an object containing deeply nested properties and outputs a new object containing only specific properties

I have a complex object with unnecessary properties and deeply nested values that I need to filter. My objective is to transform this initial object into a new object containing only the specific fields I require. Here's an illustration of the large ...

javascriptreactjsreduxlodash

Exploring the use of MediaSource for seamless audio playback

Currently working on integrating an audio player into my Angular web application by following a tutorial from Google Developers and seeking guidance from a thread on Can't seek video when playing from MediaSource. The unique aspect of my implementati ...

javascripttypescripthtml5-audiomedia-source

Implementing a callback in the app.get function within Node.js: A step-by-step guide

I have a fully functioning website and now I am looking to add some logic and data analysis to it. Below is the code snippet for rendering my /data page: app.get("/data", (req, res) => { const sql = "SELECT * FROM MyMoods"; cons ...

javascriptnode.jsexpress

Troubleshooting a problem with Angular routing when trying to access a specific URL using

My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this... <a href="/products/{{ product.id }}">{{ product.title }}</a> For instance, when ...

javascriptangularjs