Navigating a stationary div within an overflowing container: Key steps

Question

Navigating a stationary div within an overflowing container: Key steps

I've been grappling with this issue for quite some time. I'm in need of a div that remains fixed in position when its parent is scrolled horizontally, yet moves along with the content when scrolled vertically. The key is to ensure that the scrolling appears seamless.

You can view an example of the problem on this jsfiddle. The issue arises when the fixed div doesn't disappear from view upon reaching the top border of its parent container.

Although I previously posted a similar inquiry on Stack Overflow, I didn't receive any helpful responses. The jsfiddle linked there provides a clearer illustration of my objective.

I've come across several queries resembling mine, but most are resolved using "sticky" techniques. Many solutions referenced in this article focus on sticky elements, which isn't exactly what I'm looking for.

Your assistance would be greatly appreciated as I'm currently at a standstill :-)

ps: I've encountered examples where the fixed div scrolls beyond the browser window, but not outside a parent container.

EDIT: While I have found solutions for scenarios involving individual scrollbar movements, they fail when dragging diagonally.

jquery css html scroll

Answer 1

Answer №1

I have found the solution you are looking for. I was able to strategically position the green child element (#container2) so that it remains fixed when horizontally scrolling, while maintaining its horizontal offset during vertical scrolling.

Here is the jQuery code:

var $container = $("#container");
var $content1 = $("#content1");
var $content2 = $("#content2");

var content2InitTop = $content2.offset().top;
var content2InitLeft = $content2.offset().left;


$container.on('scroll', function () {
    var scrollTop = $(this).scrollTop();
    var scrollLeft = $(this).scrollLeft();

    if (scrollLeft == 0 && scrollTop == 0) {
        $content2.removeClass('fixed');
        $content2.offset({
            'top': content2InitTop,
            'left': content2InitLeft
        });
    }

    if (scrollLeft > 0) {
        $content2.addClass('fixed');
        $content2.offset({
            'top': content2InitTop - scrollTop
        });
    } 

    if (scrollTop > 0) {
        $content2.removeClass('fixed');
        $content2.offset({
            'top': content2InitTop - scrollTop,
            'left': content2InitLeft
        });
    } else {
        $content2.offset({
            'left': content2InitLeft
        });
    }
});

Additionally, here is the corresponding CSS:

div, body {
    margin : 0px;
    padding : 0px;
    border : 0px;
}
#container {
    width: 400px;
    height: 200px;
    margin: 45px;
    overflow: auto;
    border: 5px solid pink;
}
#inner {
    width: 800px;
    height: 500px;
    position: relative;
}
#content1 {
    width: 300px;
    height: 50px;
    background-color: red;
}
#content2 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin-top: 10px;
    position: absolute;
}
#content2.fixed {
    position: fixed;
    background-color: lightgreen;
}

Lastly, you can view the demonstration on this fiddle: http://jsfiddle.net/audetwebdesign/7Aw6M/

Answer 2

I have found the solution you are looking for. I was able to strategically position the green child element (#container2) so that it remains fixed when horizontally scrolling, while maintaining its horizontal offset during vertical scrolling.

Here is the jQuery code:

var $container = $("#container");
var $content1 = $("#content1");
var $content2 = $("#content2");

var content2InitTop = $content2.offset().top;
var content2InitLeft = $content2.offset().left;


$container.on('scroll', function () {
    var scrollTop = $(this).scrollTop();
    var scrollLeft = $(this).scrollLeft();

    if (scrollLeft == 0 && scrollTop == 0) {
        $content2.removeClass('fixed');
        $content2.offset({
            'top': content2InitTop,
            'left': content2InitLeft
        });
    }

    if (scrollLeft > 0) {
        $content2.addClass('fixed');
        $content2.offset({
            'top': content2InitTop - scrollTop
        });
    } 

    if (scrollTop > 0) {
        $content2.removeClass('fixed');
        $content2.offset({
            'top': content2InitTop - scrollTop,
            'left': content2InitLeft
        });
    } else {
        $content2.offset({
            'left': content2InitLeft
        });
    }
});

Additionally, here is the corresponding CSS:

div, body {
    margin : 0px;
    padding : 0px;
    border : 0px;
}
#container {
    width: 400px;
    height: 200px;
    margin: 45px;
    overflow: auto;
    border: 5px solid pink;
}
#inner {
    width: 800px;
    height: 500px;
    position: relative;
}
#content1 {
    width: 300px;
    height: 50px;
    background-color: red;
}
#content2 {
    width: 150px;
    height: 50px;
    background-color: green;
    margin-top: 10px;
    position: absolute;
}
#content2.fixed {
    position: fixed;
    background-color: lightgreen;
}

Lastly, you can view the demonstration on this fiddle: http://jsfiddle.net/audetwebdesign/7Aw6M/

Answer 3

Answer №2

The solution to your question involves using the following CSS property:

position:absolute

It's important to note that a parent element cannot hide overflow for a fixed element.

For further reference, you can visit this link: http://jsfiddle.net/sczpY/7/

Answer 4

The solution to your question involves using the following CSS property:

position:absolute

It's important to note that a parent element cannot hide overflow for a fixed element.

For further reference, you can visit this link: http://jsfiddle.net/sczpY/7/

Answer 5

Answer №3

Check out the live DEMO http://jsfiddle.net/MPsFC/1/

Everything is functioning perfectly after implementing some additional code.

var $container = $("#container");
var $content1 = $("#content1");
var $content2 = $("#content2");

var content2InitTop = $content2.offset().top;

var lastScrollTop = 0;
$container.on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    var scrollLeft = 0 - $(this).scrollLeft();           

    if (scrollTop <= lastScrollTop) {
        $content2.addClass('fixed');
        $content2.offset({'top': content2InitTop - scrollTop});
    }
    else {
        $content2.removeClass('fixed');
    }           
});

Answer 6

Check out the live DEMO http://jsfiddle.net/MPsFC/1/

Everything is functioning perfectly after implementing some additional code.

var $container = $("#container");
var $content1 = $("#content1");
var $content2 = $("#content2");

var content2InitTop = $content2.offset().top;

var lastScrollTop = 0;
$container.on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    var scrollLeft = 0 - $(this).scrollLeft();           

    if (scrollTop <= lastScrollTop) {
        $content2.addClass('fixed');
        $content2.offset({'top': content2InitTop - scrollTop});
    }
    else {
        $content2.removeClass('fixed');
    }           
});

Navigating a stationary div within an overflowing container: Key steps

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to set a newly selected HTML option as the first choice?

What are some debugging techniques for troubleshooting jQuery.post() requests when using JSON as the dataType?

What is the process of selecting a hyperlink?

Creating custom jQuery plugins involves defining prototype functions that can receive callback arguments

Struggles with conflicting versions of Jquery within asp.net

Tips for reducing the JavaScript file size outputted by a liquid template generator

What is causing the inconsistency and instability in this jQuery sortable configuration?

Clear, crisp images within a user interface web view

Tips for extracting information from a SharePoint list using JavaScript and jQuery

Leveraging sessions within the CSS Declaration

displaying dropdown menu from bootstrap 4 on top of a div located below

Ways to animate elements while scrolling in React.js?

Text area featuring unique border design, with border color change upon focus?

Using CSS to place my logo within the navigation bar

A guide to integrating the YouTube player and Facebook API with Bootstrap 3

Complete picture in a circular div with aspect ratio

accessing PHP array elements within JSON

Revolutionary AJAX technology seamlessly updates and refreshes elements within every row or form on a webpage

Running JavaScript code for the iframe

Retrieving HTML table data using PHP