Skip to content
Related Articles
Open in App
Not now

Related Articles

How to change opacity while scrolling the page?

Improve Article
Save Article
  • Last Updated : 04 Oct, 2019
Improve Article
Save Article

jQuery is used to control and change the opacity during the scrolling of web page. Create a web pages to change the opacity while scrolling the page. The jQuery scroll function is used to scroll the web page and set opacity of text content.

<!-- HTML code to change the opacity of web
    page when scrolling it -->
<!DOCTYPE html>
        Change the opacity during scroll
        /* Margin and Padding is set to zero 
        so the body can occupy the full 
        screen page */
        body {
            margin: 0;
            padding: 0;
            background: green;
        /* To put the header in the center of 
        the page we used justify-content and 
        align-items and set their value as
        center, You can add any background image */
        .header-bg {
            position: fixed;
            width: 100%;
            height: 300px;
            justify-content: center;
            align-items: center;
            display: flex;
        /* Box shadow provides shadow effect 
        to the element */
        .header-bg h2 {
            margin: 0;
            padding: 0;
            color: #000;
            text-align: center;
            padding: 20px;
            max-width: 80%;
        /* Set "position:relative" then section can move
        from its original position, by using position:relative,
        the position of the section is not dependent on the
        container. The box-sizing property is used to include
        the padding and border in an element */
        section {
            position: relative;
            padding: 100px;
            width: 100%;
            min-height: 100vh;
            box-sizing: border-box;
        section h2 {
            margin: 0 0 50px;
            padding: 0;
            font-size: 40px;
            color: #fff; 
        section p {
            color: #fff;
            font-size: 1.3em;
    <div class="header-bg">
        <h2>Change Opactity on Scroll</h2>
            A computer science portal for geeks
    <script src=
    <!-- Script to change opacity when scrolling the web page -->
                $('.header-bg').css("opacity", 1- $(window).scrollTop() / 700)


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!