Sticky Div Focus Example

January 20, 2025 · AI Conversations

User

made sticky a div section using javascript and remove sticky when focus out div

Assistant

Here's how you can make a `div` sticky when it is focused and remove the sticky behavior when it loses focus using JavaScript:

### HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Div Example</title>
    <style>
        .content {
            height: 2000px; /* For scrolling effect */
            padding: 10px;
        }

        .sticky-section {
            width: 100%;
            padding: 20px;
            background-color: #f4f4f4;
            transition: all 0.3s ease;
        }

        .sticky {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="sticky-section" tabindex="0">
            Focus on this section to make it sticky.
        </div>
    </div>

    <script>
        // Select the div
        const stickySection = document.querySelector('.sticky-section');

        // Add event listeners for focus and blur
        stickySection.addEventListener('focus', () => {
            stickySection.classList.add('sticky');
        });

        stickySection.addEventListener('blur', () => {
            stickySection.classList.remove('sticky');
        });
    </script>
</body>
</html>

### Explanation:
1. **CSS**:
– A class `.sticky` is added to make the `div` sticky using `position: fixed;` and other styles.
– The `sticky-section` has a default style with padding and background color.

2. **JavaScript**:
– The `focus` event is used to add the `.sticky` class when the `div` gains focus.
– The `blur` event is used to remove the `.sticky` class when the `div` loses focus.

3. **HTML**:
– The `tabindex="0"` is added to make the `div` focusable with the keyboard or mouse.

Now, when you click or tab into the `div`, it will become sticky. When you click or tab out, it will revert to its normal state.

User

sticky under a parent div

Assistant

To make a `div` sticky under a parent container and ensure it stays within the boundaries of the parent, you can use CSS for the sticky behavior and JavaScript to add or remove the class when focused or blurred.

### HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Under Parent</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .parent {
            position: relative;
            height: 800px; /* Example height */
            overflow: hidden;
            background: #f9f9f9;
            border: 1px solid #ccc;
            margin: 20px;
            padding: 10px;
        }

        .content {
            height: 1200px; /* Content for scrolling */
            padding: 20px;
        }

        .sticky-section {
            position: relative;
            width: 100%;
            padding: 20px;
            background-color: #e3f2fd;
            border: 1px solid #2196f3;
            transition: all 0.3s ease;
        }

        .sticky {
            position: sticky;
            top: 0;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="parent">
            <div class="sticky-section" tabindex="0">
                Focus on this section to make it sticky within the parent.
            </div>
        </div>
    </div>

    <script>
        // Select the sticky section
        const stickySection = document.querySelector('.sticky-section');

        // Add focus and blur event listeners
        stickySection.addEventListener('focus', () => {
            stickySection.classList.add('sticky');
        });

        stickySection.addEventListener('blur', () => {
            stickySection.classList.remove('sticky');
        });
    </script>
</body>
</html>

### Explanation:

1. **CSS**:
– The `position: sticky;` ensures that the `sticky-section` will stick to the top of the parent container when scrolling but stay within its parent's boundaries.
– The `.sticky` class is applied dynamically when the `div` is focused.

2. **JavaScript**:
– The `focus` event dynamically adds the `.sticky` class to the `div` when it's focused.
– The `blur` event removes the `.sticky` class when the `div` loses focus.

3. **Parent Boundary**:
– The parent `div` (`.parent`) has `position: relative;` to define a local context for `position: sticky;` in the child.

4. **Focusable `div`**:
– The `tabindex="0"` makes the `div` focusable so you can use both mouse clicks and keyboard navigation.

This setup ensures that the sticky behavior applies only within the boundaries of the parent container.

User

above not workiong

Assistant

If the sticky behavior is not working as expected, there may be some adjustments needed. Here's a corrected version that ensures the sticky `div` stays within the bounds of its parent container. This approach keeps the sticky behavior when the `div` is focused and removes it when it loses focus.

### HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Div Under Parent</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .parent {
            position: relative;
            height: 800px; /* Example height */
            overflow: auto; /* Enable scrolling if necessary */
            background: #f9f9f9;
            border: 1px solid #ccc;
            margin: 20px;
            padding: 10px;
        }

        .sticky-section {
            width: 100%;
            padding: 20px;
            background-color: #e3f2fd;
            border: 1px solid #2196f3;
            transition: all 0.3s ease;
            /* Adding margin to demonstrate sticky effect */
            margin-top: 10px;
        }

        .sticky {
            position: sticky;
            top: 0; /* Stick to the top of the parent */
            z-index: 10; /* Ensure it stays on top of other content */
        }

        .content {
            height: 1200px; /* Extra height for scrolling effect */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="parent">
            <div class="sticky-section" tabindex="0">
                Focus on this section to make it sticky within the parent.
            </div>
            <div style="height: 1000px; padding: 10px;">
                Scroll down to see the sticky effect. This is additional content inside the parent.
            </div>
        </div>
    </div>

    <script>
        // Select the sticky section
        const stickySection = document.querySelector('.sticky-section');

        // Add focus and blur event listeners
        stickySection.addEventListener('focus', () => {
            stickySection.classList.add('sticky');
        });

        stickySection.addEventListener('blur', () => {
            stickySection.classList.remove('sticky');
        });
    </script>
</body>
</html>

### Key Adjustments:
1. **Parent Overflow**: The `.parent` class now has `overflow: auto;` to ensure that if the content exceeds the height, it will allow for scrolling, which is necessary for testing the sticky behavior.

2. **Sticky Position**: The `.sticky-section` should have the `position: sticky;` property applied only when it is focused, ensuring it sticks to the top of its parent container.

3. **Content Height**: The parent contains additional content to create a scrolling scenario, demonstrating the sticky effect more effectively.

### How It Works:
– When the `.sticky-section` is focused, it becomes sticky and will stick to the top of the parent container as you scroll.
– When it loses focus, the sticky class is removed, and it behaves as a normal `div` again.

### Testing:
– To test this, click or tab into the `.sticky-section`. It should stick to the top of the parent as you scroll down. When you click or tab out of it, it should return to its original position in the flow of the document.

User

also mouse enter event

Assistant

To add a mouse enter event that makes the `div` sticky, you can simply modify the JavaScript code to include an event listener for the `mouseenter` event. Here’s the updated example with the mouse enter functionality:

### Updated HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Div Under Parent</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .parent {
            position: relative;
            height: 800px; /* Example height */
            overflow: auto; /* Enable scrolling if necessary */
            background: #f9f9f9;
            border: 1px solid #ccc;
            margin: 20px;
            padding: 10px;
        }

        .sticky-section {
            width: 100%;
            padding: 20px;
            background-color: #e3f2fd;
            border: 1px solid #2196f3;
            transition: all 0.3s ease;
            margin-top: 10px; /* Adding margin to demonstrate sticky effect */
        }

        .sticky {
            position: sticky;
            top: 0; /* Stick to the top of the parent */
            z-index: 10; /* Ensure it stays on top of other content */
        }

        .content {
            height: 1200px; /* Extra height for scrolling effect */
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="parent">
            <div class="sticky-section" tabindex="0">
                Focus or hover over this section to make it sticky within the parent.
            </div>
            <div style="height: 1000px; padding: 10px;">
                Scroll down to see the sticky effect. This is additional content inside the parent.
            </div>
        </div>
    </div>

    <script>
        // Select the sticky section
        const stickySection = document.querySelector('.sticky-section');

        // Add event listeners for focus, blur, and mouse enter
        stickySection.addEventListener('focus', () => {
            stickySection.classList.add('sticky');
        });

        stickySection.addEventListener('blur', () => {
            stickySection.classList.remove('sticky');
        });

        stickySection.addEventListener('mouseenter', () => {
            stickySection.classList.add('sticky');
        });

        stickySection.addEventListener('mouseleave', () => {
            stickySection.classList.remove('sticky');
        });
    </script>
</body>
</html>

### Key Additions:
1. **Mouse Events**:
– **`mouseenter`**: This event adds the `.sticky` class when the mouse enters the `.sticky-section`, making it sticky.
– **`mouseleave`**: This event removes the `.sticky` class when the mouse leaves the `.sticky-section`, reverting it back to its normal position.

### How It Works:
– The `.sticky-section` will now stick to the top of the parent container when it is focused (using the keyboard) or hovered over (using the mouse).
– It will lose its sticky behavior when it loses focus or the mouse leaves the section.

This setup provides both keyboard accessibility and a smooth user experience with mouse interactions!

Sticky Div Focus Example

Leave a Comment Cancel