Should the element be scrolled beyond a fixed-positioned element

Question

Should the element be scrolled beyond a fixed-positioned element

Is there a way to determine if an element is scrolled behind another element that is fixed at the top?

I am looking to trigger some javascript when an element is positioned below a fixed element and every height or scrollTop thereafter.

I am attempting to create a sticky header, but simply using fixed positioning based on scrollTop is not sufficient. This is because the element I want to make sticky gets pushed down as the viewport size changes, requiring a different scrollTop value to fix the element in place.

This has led me to consider the possibility of fixing/stickying the element only when it is underneath another element that is already fixed at the top.

So far, I have experimented with: position:sticky; along with its necessary vendor prefixes, along with trying out these two polyfills:

javascript jquery css css-position sticky

Answer 1

Answer №1

If you're looking for a solution to handle sticky elements on your website, Sticky Kit seems like the perfect tool for the job. You can check it out here:

One of the key features is the ability to trigger an event to recalculate the sticky positions when your content changes.

For instance:

$(window).on('resize', function(){
    $(document.body).trigger('sticky_kit:recalc');
});

Note:

I took a quick look at your website.

In order for this functionality to work correctly, you'll need to move your #filter and #main elements to a shared parent under <body> (not direct children of <body>):

<body>
    <div>
        <section id="filter">
            ...
        </section>
        <main id="main">
            ...
        </main>
    </div>
</body>

Then, in your main.js file, remove the entire $(window).scroll() handler as it's unnecessary. Let sticky-kit handle the calculations for the element's position:

// Removed $(window).scroll(...)
$('#filter').stick_in_parent();

$(window).on('resize', function(){
    $(document.body).trigger('sticky_kit:recalc');
});

Lastly, make sure to trigger the 'sticky_kit:recalc' event after any animations or effects such as slideToggle have completed. This will ensure that the fixed elements are positioned correctly. Failure to do so may result in strange behavior from the stickied element.

Best of luck with implementing this on your site!

Answer 2

If you're looking for a solution to handle sticky elements on your website, Sticky Kit seems like the perfect tool for the job. You can check it out here:

One of the key features is the ability to trigger an event to recalculate the sticky positions when your content changes.

For instance:

$(window).on('resize', function(){
    $(document.body).trigger('sticky_kit:recalc');
});

Note:

I took a quick look at your website.

In order for this functionality to work correctly, you'll need to move your #filter and #main elements to a shared parent under <body> (not direct children of <body>):

<body>
    <div>
        <section id="filter">
            ...
        </section>
        <main id="main">
            ...
        </main>
    </div>
</body>

Then, in your main.js file, remove the entire $(window).scroll() handler as it's unnecessary. Let sticky-kit handle the calculations for the element's position:

// Removed $(window).scroll(...)
$('#filter').stick_in_parent();

$(window).on('resize', function(){
    $(document.body).trigger('sticky_kit:recalc');
});

Lastly, make sure to trigger the 'sticky_kit:recalc' event after any animations or effects such as slideToggle have completed. This will ensure that the fixed elements are positioned correctly. Failure to do so may result in strange behavior from the stickied element.

Best of luck with implementing this on your site!

Should the element be scrolled beyond a fixed-positioned element

Answer №1

Similar questions

What is the alternative to using document.getElementById?

Is it Necessary to Create a Separate Stylesheet for This, And if so, How Should it be Implemented? (Using PHP

Tips for Adding Items to an Infinite Loop

Create data according to jQuery's AJAX data method

React Router's default component for nested routes

ReactJS Application: Issue with Selective Mobile Scrolling

Error encountered while executing jest tests due to an unexpected import token

Sending a JSON Object to an API endpoint using the $.ajax method

When attempting to use a jQuery-formatted JSON object within an <optgroup > returned via AJAX from PHP and MySQL, it appears to be incompatible with Select2

Display View with AJAX in the MVC pattern when server-side validation does not pass

Creating dynamic grid data based on various filter criteria using JavaScript (AngularJS)

The NGINX reverse proxy fails to forward requests to an Express application

altering the number of columns in Bootstrap based on screen size to prevent stacking

Why is it necessary to decode JSON stringified objects in Vue props?

Is there a way to efficiently display more than 10 data items at a time using the FlatList component in react-native?

Tips for adding a dynamic variable into a react JSX map function

Attempting to ensure that my website is fully optimized for all devices and

What is the method for obtaining an element with a class name that does not match a specific value?

Why is the axios.get promise not getting resolved?

Guide on presenting an image retrieved from a database with ajax