html - Is this possible without using javascript? - Stack Overflow

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);
});

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);
});

• javascript
• html
• css

Share Follow edited Aug 17, 2014 at 4:32 AstroCB 12.4k2020 gold badges5959 silver badges7474 bronze badges asked Aug 11, 2014 at 15:47 Memet OlsenMemet Olsen 4,61855 gold badges4343 silver badges5050 bronze badges 10

• What is the purpose of designing it without any Javascript? Probably possible with position trickery. – esqew Commented Aug 11, 2014 at 15:49
• 1 Sounds pretty simple, you want two containers, container1 is really tall, and contains red and container2, container2 contains green. Both have scroll enabled for a given direction(container1 has vertical scroll, container 2 has horizontal scroll) – scragar Commented Aug 11, 2014 at 15:50
• 2 You can have CSS make something fixed/unmoving very easily. But "dynamically" fixed so that the thing unsticks and starts moving upon some event/condition, you'll need JS – Marc B Commented Aug 11, 2014 at 15:50
• @esqew The position trick is not acceptable because IE renders it too laggy. – Memet Olsen Commented Aug 11, 2014 at 15:56
• 3 Just float C to the left and add a margin of 100px. Also set the height to 10%. By float I'm talking about setting it's position to absolute. – Derek 朕會功夫 Commented Aug 11, 2014 at 16:21

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 6

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/5z3nLqq5/12/

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.

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/gnfwg08c/

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) :/