Div with Sticky Header and Scrolling Ability

Question

Div with Sticky Header and Scrolling Ability

I am working on a project that involves creating a scrollable div with "title" elements inside. I want the title element of each section to stick to the top of the div as I scroll, similar to how a menu sticks to the top of a webpage. An example of this can be seen in the Mac OS X calendar's "Day" view.

I have found a solution for making the element stick, but I need help figuring out how to detect when a title element reaches the top of the scrollable div.

Here is the scenario:

<div class="container">
    <div class="floatLeft">
        <div class="scrollingDiv" style="height:100px; overflow-y:scroll; overflow-x:hidden;">
            <ul>
                <li>
                    <div>
                        <h4>Title</h4>
                        <div>Content</div>
                    </div>
                </li>
                <li>
                    <div>
                        <h4>Title</h4>
                        <div>Content</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="floatRight"></div>
</div>

Is there a way to determine when the second "Title" reaches the top of the "scrollingDiv", not the top of the entire page?

Any assistance would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

To achieve a sticky element, you can set its top property to zero and apply position:absolute; using CSS.

.stickyTop {
    position:absolute;
    top:0px;
}

This will keep the element fixed at the top of the page at all times.

If you want to determine when an element has reached the top of the window, you can use offset() to track its current position and check if it's close to the top.

$('div.scrollingDiv').scroll(function() {
    var active = null;
    $('.scrollingDiv h4').each(function(idx, val) {
        var topOffset = $(val).offset().top;
        if (topOffset < 20) // elem is 20 px from top
        {
            // Element closest to the top
            active = $(val);
        }

        console.log(active); // Element nearest to the top
    });

});

The code above iterates through all the h4 elements to find the one closest to the top of the page, then logs it.

You can combine these techniques to create something unique like a Creative jsFiddle.

Answer 2

To achieve a sticky element, you can set its top property to zero and apply position:absolute; using CSS.

.stickyTop {
    position:absolute;
    top:0px;
}

This will keep the element fixed at the top of the page at all times.

If you want to determine when an element has reached the top of the window, you can use offset() to track its current position and check if it's close to the top.

$('div.scrollingDiv').scroll(function() {
    var active = null;
    $('.scrollingDiv h4').each(function(idx, val) {
        var topOffset = $(val).offset().top;
        if (topOffset < 20) // elem is 20 px from top
        {
            // Element closest to the top
            active = $(val);
        }

        console.log(active); // Element nearest to the top
    });

});

The code above iterates through all the h4 elements to find the one closest to the top of the page, then logs it.

You can combine these techniques to create something unique like a Creative jsFiddle.

Div with Sticky Header and Scrolling Ability

Answer №1

Similar questions

The function ng-click does not successfully uncheck ion-radio

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

Why does the jQuery .each loop only loop when I console.log?

Is JSON formatting essential for Highcharts? How to divide and preprocess data for creating charts?

Utilize MySQL to populate highcharts with data

Issues with Nuxtjs routing on Netlify

Creating a JSON object hashtable using jsHashtable: A step-by-step guide

What is the reason for npm and yarn to download multiple versions of jquery?

Having Trouble with Jquery UI Autocomplete and JSON Integration

Resetting the quiz by utilizing the reset button

The CSS specificity of a nested HTML element with no explicitly defined styles

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Creating Tailored Breakpoints with Bootstrap for a Unique Design

Combining the results of JavaScript comparisons into a unified object array and adding a new value if it matches an existing value within the same

Does JavaScript automatically round large numbers?

How to retrieve the data variable in Vue JS script

Is it possible to use uglifyjs to merge multiple files into a single minified file?

The Highcharts datetime line takes a detour through time when faced with unorganized data

In Javascript, the splice method removes all elements except the specified element

Setting up a Webpack configuration to compile modules within the node_modules directory