Skip to content
Related Articles

Related Articles

Blaze UI Sticky

View Discussion
Improve Article
Save Article
  • Last Updated : 05 May, 2022
View Discussion
Improve Article
Save Article

Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

Blaze UI Sticky is used to pin some useful content or offers in the webpage and sticks to the viewport even if the user scrolls down the webpage. Sticky content is used to keep some useful content or banner on the screen.

Blaze UI Sticky Attributes:

  • top: This field takes the value for the space between the top of the screen and the top of the element.

Syntax:

<blaze-sticky top="50">
    ...
</blaze-sticky>

Example 1: In the following example, we have 4 sticky elements with different content.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0" />
    <title> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;"
                    GeeksforGeeks 
                </h1>
            </div>
            <strong> Blaze UI Sticky </strong> <br> <br>
  
            <blaze-sticky top="20">
                <blaze-alert open type="success">
                    Welcome to GeeksforGeeks
                </blaze-alert>
            </blaze-sticky>
            <div style="height: 600px;"></div>
  
            <blaze-sticky top="80">
                <blaze-alert open type="brand">
                    Data Structures
                </blaze-alert>
            </blaze-sticky>
            <div style="height: 600px;"></div>
  
            <blaze-sticky top="140">
                <blaze-alert open type="warning">
                    Algorithms
                </blaze-alert>
            </blaze-sticky>
            <div style="height: 600px;"></div>
              
            <blaze-sticky top="200">
                <blaze-alert open type="info">
                    Machine Learning
                </blaze-alert>
            </blaze-sticky>
            <div style="height: 600px;"></div>
        </center>
    </div>
    <script>
        const checkCurrent = async () => {
            let tab = await $('#tabs').get(0).currentTab()
            alert(`The current opened tab index is ${tab + 1}`)
        }
    </script>
</body>
  
</html>


Output:

Blaze UI Sticky

Example 2: In the following example, we will change the top value of sticky using the range slider.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0" />
    <title> GeeksforGeeks | BlazeUI </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <div class="o-container" style="padding: 1em;">
        <center>
            <div>
                <h1 style="color: green;">
                    GeeksforGeeks
                </h1>
            </div>
            <strong> Blaze UI Sticky </strong> <br> <br>
  
            <label id="hs" for="hs">
                Height Selector: 20
            </label>
            <input name="hs" id="heightSelector" type="range" 
                   class="c-range c-range--error" min="10" 
                   max="100" value="20" />
            <br />
            <blaze-sticky class="sticky" top="20">
                <blaze-alert open type="success">
                    Welcome to GeeksforGeeks
                </blaze-alert>
            </blaze-sticky>
            <div style="height: 600px;"></div>
        </center>
    </div>
    <script>
        const checkCurrent = async () => {
            let tab = await $('#tabs').get(0).currentTab()
            alert(`The current opened tab index is ${tab + 1}`)
        }
        $('#heightSelector').change(function () {
            let val = $(this).val()
            $('#hs').html(`Height Selector: ${val}`)
            $('.sticky').each(function (index, elem) {
                $(elem).attr('top', 60 * index + val)
            })
        })
    </script>
</body>
  
</html>


Output:

Blaze UI Sticky

Reference: https://www.blazeui.com/components/sticky


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!