How you would do this layout?

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?

2/10/2019 2:40:00 PM


11 Answers

New Answer


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


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


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


With animation 😗


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


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


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).


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...


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


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 👑 😊


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