How can I define the boundaries for the scrolling of a static background image?

Question

How can I define the boundaries for the scrolling of a static background image?

Is there a way to limit how far a fixed background image can scroll down a page? Essentially, is it possible to change the background attachment to static when the bottom of the background image is 10px away from the bottom edge of its div container?

In the code snippet below, how can I make the coral gradient (placeholder for an image) stop scrolling with the page once it reaches 10vh away from the border between the red and yellow divs? (Preferably using CSS only, but open to JavaScript solutions as well)

.red {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: red fixed linear-gradient(lightcoral, lightcoral) 45vw 20vh / 20vh 20vh no-repeat;
}

.yellow {
  position: absolute;
  top: 100vh;
  height: 100vh;
  width: 100%;
  background-color: yellow;
}

<div class="red"></div>
<div class="yellow"></div>

Appreciate any assistance!

javascript html css

Answer 1

Answer №1

Hello Aidan!

In my method, I utilize an img tag instead of using it as a background. The trick lies in employing the Position property with sticky positioning.

<style>
    body{
        margin: 0;
    }
    
    section{
        height:150vh;
        width: 100%;
    }
    
    .blue {
        background: rgb(23, 59, 71);
        padding: 10px 0;
    }

    .green {
        background-color: rgb(29, 82, 29);
    }

    .img{
        width: 100px;
        height: 100px;
        background-color: lightcoral;
        position: sticky;
        top: 50vh;
    }

</style>

<!-- body -->

<section class="blue">
    <div class="img"></div>
</section>

<section class="green"></section>

To adjust the border offset, you can experiment with adjusting the padding of its container.

I hope this solution is beneficial to you. Happy coding! ;)

Answer 2

Hello Aidan!

In my method, I utilize an img tag instead of using it as a background. The trick lies in employing the Position property with sticky positioning.

<style>
    body{
        margin: 0;
    }
    
    section{
        height:150vh;
        width: 100%;
    }
    
    .blue {
        background: rgb(23, 59, 71);
        padding: 10px 0;
    }

    .green {
        background-color: rgb(29, 82, 29);
    }

    .img{
        width: 100px;
        height: 100px;
        background-color: lightcoral;
        position: sticky;
        top: 50vh;
    }

</style>

<!-- body -->

<section class="blue">
    <div class="img"></div>
</section>

<section class="green"></section>

To adjust the border offset, you can experiment with adjusting the padding of its container.

I hope this solution is beneficial to you. Happy coding! ;)

How can I define the boundaries for the scrolling of a static background image?

Answer №1

Similar questions

Incorporate the ability to display a shape on a map when hovering over a table element, without the need to manually code a JavaScript function for every instance

Integrate functionality to track elapsed hours in stopwatch timer

Extracting PartialView contents as a string

Tiny adjustment to jQuery Collapsible Panel

Improprove the efficiency of flattening an array containing nested JSON objects using JavaScript

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

Automatically install modules during the execution of the Node Webkit build process

Retaining the data retrieved from a successful $.ajax call's done() function

Filter products by pressing the "Enter" key while using the search input in

Deactivate the button until the input meets validation criteria using Angular

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

Using jQuery to merge two JSON objects into a single table

Steps for comparing two inputs and displaying a div:1. Obtain the values of

tips on toggling div visibility based on data filtering

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

Submitting a form using jquery in HTML

What could be causing certain items in my Bootstrap navbar to be hidden on mobile screens?

Is Angular UI's data binding more of a push or pull mechanism? How can I optimize its speed?

Implementing a Responsive Form on an Image Using Bootstrap

New Angular Datatables used to create a revitalizing table