How you would do this layout?

Question

Hi. I want get a specific layout with some animation but i want get it without faking or get too js code... My sample is here https://code.sololearn.com/WNA347f85pQD/#html which has some problem like scolling position of actived item.
My question is: like you would implement this layout?

Answer 1

First of all this is so cool view template😍

Back to issue:
The problem is that the clicking on items that are lower opens the view on top but screen stays at same scroll position.

I had this same issue in below code, so what I did was every time we click an item we scroll to the top of screen, which made sure that view always open on top of screen.

// line 355 and 356 in my code
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

But the problem with this solution was, the list will also scroll back to top and we ll lose the scroll position where item was actually clicked.

maybe we can save scroll position and scroll back to it after closing the item view.

https://code.sololearn.com/WHtre990XTtu/?ref=app

Answer 2

KrOW another solution would be to make

#desc-bar, #contents{
position: fixed;
}

That's it.

If in case you want scroll to happen for stuffs inside #content then you can do so in a div within #contents

https://code.sololearn.com/W464x1oP2Ap1/?ref=app

Answer 3

Awesome bro but
As you said
It's really hard to tell
weather implement this or not
Yes very much efficiency though I don't know who the actual end user's and there old/new/some(beta) types browsers and also matters that they ,Are they are in desktop view or iOS typo web , mobile version

I have seen some websites suffers to deliver best in Safari browsers

this answer is for the question " would you implement this layout ?"

I'll implement
85% -Yes

15%-No
5% for some browsers
10%users + Thier device's

Answer 4

With animation 😗

Answer 5

//I am just here to say, Sooo coool template 😍😍😍

Answer 6

Good Morpheus
Can you make like this
For active item
On scroll
transform:scale(0.8);
transform:scale(0.5);
transform:scale(0.2);
transform:scale(0);
it will disappears in minimiez format

not only in css style
ill wanted to see in js to

Answer 7

Morpheus First, thank you 😉 Second, yes its another problem. Your can be solved (in part) using a fixed element than overlay the content. Mine problem is more subtle. In practice, like i have developed, its hard (maybe impossible) to keep the item in "active" state (eg. on appearing bar) on scrolling because it have to change the positioning type destroying all. Of course it can be developed in other manners but i trying to find the "cleaner" one (without massice use of js and without too relayouts by browser).

Answer 8

Charan LEo25 For now, think how you can implement this without thinking to browsers. I think that the layout is not hard to understand. Considerate this like a challenge for you...

Answer 9

Charan LEo25 Animation is part of layout here 😉. Futhermore its your choice implement or not.. Are welcomed good ideas too than, obliviouslly, are better supported by codes. I dont want thief other codes, i want a confront with other developers, above all those more good than me ✌... its necessary for learn more

Answer 10

Morpheus I thinked a similar solution but it dont work like seem... Try to scroll in the item when its on the desc-bar and you will see an undsiderated scroll if the viewport cannot contains all items

Shudarshan Rai 👑 😊

Answer 11

I edited my code and, i hope, i removed the scrolling problem simply by changing the overflow-y on "activation"... Anyway, for some strange motive, it dont work on my old device (i refer to html/css and not js). Futhermore it has many other problems like window resizing... Suggestions are welcomed