CODEWITHSUNDEEP
javascripthtmlcss
Memet Olsen
Memet Olsen

Reputation: 4608

Is this possible without using javascript?

I made a simple web UI with JSFiddle and I am wondering if the same UI can be made without using JavaScript.

A Fiddle says more than 1000 words.

So the question is (because it seems unclear for some people): How can I achieve the same results without using any JavaScript?

PS: I don't want to use JavaScript to re-calculate the position on every scroll event because the repositioning in IE is not smooth enough.

HTML:

<div class="A">
    <div class="B">
        B
    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>
</div>

CSS:

.A {
    background-color: yellow;
    height: 400px;
    width: 700px;
    overflow:scroll;
    position: relative;
}

.B {
    background-color: green;
    height: 1000px;
    width: 1500px;
    position: absolute;
    top:0;
    color:white;
}

.C {
    background-color: red;
    position: absolute;
    left: 100px;
    top: 0px;
    height: 1000px;
    width: 100px;
}

JS (with jQuery):

$('.A').scroll(function(e) {
    $('.C').css('left', e.target.scrollLeft + 100);
});

Upvotes: 12

Views: 305

Answers (4)

woojoo666
woojoo666

Reputation: 7921

Seems to work:

JsFiddle

Added a container for B that was the width of A but the height of B. Works if you don't mind the horizontal scrollbar at the bottom of B (which you can hide using webkit-scrollbar: JsFiddle) :/

Upvotes: 0

Oriol
Oriol

Reputation: 288660

When enough browsers support it, you will be able to use the new sticky position value:

.C {
    position: sticky;
    position: -webkit-sticky;
    left: 100px;
    top: auto; /* Default value */
}

http://jsfiddle.net/5z3nLqq5/12/

Upvotes: 6

Andranik
Andranik

Reputation: 90

I added another container to the HTML code, like this:

<div class="container">

    <div class="A">

        <div class="B">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
        </div>

    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>

</div>

Then added some style to the container class

.container {
    background-color: green;
    height: 400px;
    width: 700px;
    position: absolute;
    top:0;
    overflow-x:hidden;
    overflow-y:scroll;
}

And made some changes to A and C classes. I know it is NOT the result that we want, but it is similar to it: Here is the fiddle http://jsfiddle.net/gnfwg08c/

Upvotes: 0

Dbl
Dbl

Reputation: 5914

I've played around with your sample (css only) and got it into a state where it was ALMOST right but not close enough imo. However since you're saying it's not fluent enough in IE i want to suggest this to you:

var $cRef = $('.C');
$('.A').scroll(function(e) {
 $cRef.css('left', e.target.scrollLeft + 100);
});

The biggest problem with IE isn't that calculations are that much slower, but that dom querys can be awfully slow depending on what version it is. Caching dom elements can make a big difference.

PS: Yes, i know you are looking for a NON-JS solution. But granting your reasoning this script might solve your issue, instead of having no solution in the end because it could be hard to get a cross browser solution which works on all platforms.

Upvotes: 2

Related Questions