I'll probably get down votes for this, but I have to ask anyways... When would I use paper-scroll-header-panel over paper-header-panel? The seem to overlap in features- both scroll, both are headers, both share some of the visual effects, etc.
I see they have different attributes and api...but a lack of attributes would not stop me from implementing my own behavior/style. I guess what I would also like is clarification on the intended use between the two.
According to the docs
paper-scroll-header-panel contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the rest of the scrollable content. Upon scrolling slightly up at any point, the header scrolls back into view.
You can view the demo to see this behaviour in action.
paper-header-panel just provides a header and scrollable content area, without the "advanced" scrolling behaviour.
Related
I am working on building sticky sidebar behavior that will run alongside a vertical feed which is very similar to a facebook feed on desktop web. position: sticky works well for the easy use case where the sidebar is shorter than the height of the viewport. However if your sidebar is larger than the viewport the sidebar needs to have some scrolling mechanism so you can see the bottom of the sidebar as you scroll down the feed.
I am trying to recreate the facebook sidebar sticky scroll here.
The best way to understand the desired behavior is to test out your facebook feed and shrink your screen height so that your viewport is smaller than your sidebar height. I'll try to summarize here:
When your viewport is taller than your sidebar (simple case)
The sidebar behaves exactly as you'd expect with position: sticky. The sidebar stays in the same place and follows as you scroll down and up.
When your viewport is smaller than your sidebar
When you scroll down initially the sidebar scrolls with the feed (they appear fixed together)
When you get to the bottom of your sidebar, it then locks at the bottom and as you scroll down more, the sidebar now appears sticky with the bottom fixed
When you now scroll back up, the sidebar once again appears attached to your main feed, and scrolls up with the main feed. Once you hit the top of the sidebar it's then sticky with the top fixed.
So between those two states (top fixed when scrolling up, bottom fixed when scrolling down), the sidebar scrolls in unison with the main feed.
It's a very nice scrolling experience but very hard to recreate.
I have accomplished the states listed in steps 1-3 above by applying position sticky with a top position, and when you scroll down, using scroll events and some viewport/sidebar height calculations to determine the height difference and adjusting the top css value so it locks when the bottom is lined up with the screen (essentially initialTop - (sidebarHeight - viewportHeight). I cannot figure out steps 4, and 5. The best I could do was transition between the two top values depending on your scroll direction but it's a very bad UX.
I have a sandbox example of a layout here: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark
There's a basic layout with 2 columns (left sidebar and main feed). And there's a react component called StickyScroll which wraps around the column and has all the logic to update the top value. This may be a completely wrong start to a good solution, but any help is greatly appreciated.
I was interested in this as well, so I spent some time studying how fb does it.
It's very clever, my hat off to whichever fb dev originally implemented this.
You have to set the top / bottom css properties on the sticky depending on the direction of scroll, and to keep things from jumping around, you also have to calculate the height of an the element above the sticky, based on scrollTop.
Here is a rough example, which demonstrates the logic in action
I try to make a mock up by your sandbox code based on facebook redesign 2020.
hope you find the answer here. I like this approach because it's not very complex. More precisely, I use the css solution when I have to create a component similar to the Facebook sidebar.So i'm not using your StickyScroll component. Hope you find something.
Codesandbox Independent Scroll
Goal
I am trying to implement a layout that works as follows:
Page content is responsive and adjusts to window width
If the page contains a large data table, the table will overflow to the right
In this case, a scroll bar on the window (not on the table) will be shown
If the user now scrolls to the right, only the table scrolls, not the rest of the page
Sidebar, header, footer (all with fixed height/width) should be present
Example
Here is a jsbin with a very hacky implementation, that should illustrate what I mean: http://jsbin.com/gonezaqala/1/edit?html,css,js,output
Issues
Frequent problems that I ran into:
I figured that I need to use position: sticky to make this layout work but since elements are only ever sticky relative to their parent, I need to try to keep the sticky elements at a top level
Alternatively, I can create a separate container that does the horizontal scrolling (like in the jsbin example), but then trying to make this fit with the other parts of the layout (sidebar, footer) because really painful
I also want to implement this in a way that all the elements in the main content area (so everything but header, footer, sidebar) are together in one single container, since I am using AngularJS and this is where my router would inject the view
Question
I am sure, I have seen this kind of behaviour before, but I can't remember where it was. So my questions are as follows:
Is this a somewhat common UI pattern? Does it have a name?
Is it possible to implement a layout like this with only CSS?
Would it anyway be desirable to create such a layout or are there any concerns from a UX perspective?
I have page based on fullPage.js and Bootsrap. By default is content in section vertically centered. But my content is dynamic and changes on click. It means, that my content has on every click different height and it cause div jumping on page.
Disabling vertical center solve the problem, but only for desktop. On smaller screen (mobiles, tablets) I can't see whole content in section.
With vertical center enabled the section is high as content.
Live example is more than word so:
Example with verticalCenter enabled (not working)
Example with verticalCenter disabled (not working)
Finally the solution was specify container height.
I would encourage you to use the responsiveWidth or responsiveHeight options provided in fullpage.js. That's going to create the best user experience for small screen devices.
But if you still want autoScrolling then you can always go for the scrollOverflow option as in this example and to adjust the scroll bar dynamically you would have to call $.fn.fullpage.reBuild() on any click that changes triggers a change in the section's height.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
Is it possible to design page like on this picture:
I need reach only three goals:
First content can be scrolled only vertically.
Second content can be scrolled only horizontally.
Must be used only browsers scrollbars.
p.s. Better if we will not use javascript code.
Yes, this is possible.
The real difficulty is to add scrollbars outside de views.
But when done, you can easily scroll to a position your scrollviews.
I don't think this is really a good feature to make this but why not.
Be strong!