With fullpage.js I'm using fp-auto-height for auto height sections, but also using a nav to auto/smooth scroll sections. If you have a section that is taller than 100vh and scroll DOWN to it, fp aligns the top of the section with the top of the viewport so the extra portion at the bottom is off screen (thumbs up). However, if you scroll UP to it, fp aligns the bottom of the section to the bottom of the viewport so the top is offscreen. My headers get cut off.
Any way to get it to always align the top of the section with the top of the viewport when section scrolling (while keeping fp-auto-height)?
This is a situation where the site began with auto scrolling and now the client doesn't want it and I don't feel like removing fp altogether unless I have to.
Related
I'm trying to use storyboard and layout constraints to align the footer image to the bottom of the view but when running on device it's hovering high above the bottom. The image is aligned with 0 margin to the superview. The view hierarchy is Controller->View->ScrollView->View->FooterImage. The image is bigger and scaled with content mode set to "aspect fit".
The constraints set on the image is sufficient, but I guess the constraints set on its super View is incorrect.
If you want to display the image at bottom you also need to make it superView align to the bottom of the ScrollView , and the same on ScrollView.
Check my previous answer here : https://stackoverflow.com/a/46539635/8187800 .
On the website I'm building I would like to integrate a horizontal position: sticky; scrolling section in the middle of a page. The page has vertical scroll. The user could scroll the section from A to Z with the vertical natural scroll of the page.
I found a perfect example of what I would like to achieve: https://nlkyt.csb.app
I don't find any resources on the subject. Does anyone knows how to create such effect?
Thanks!
I was looking for a similar effect when I stumbled upon this blog post. To sum it up you need three containers which we can refer to as:
space holder - This container will maintain the vertical space scroll space. More on this below.
sticky - This container will have a set height (100vh in my example). It will also be position: sticky; top: 0;.
horizontal - This container will contain the content that you wish to horizontally scroll on. Its width will be determined by the content that it contains.
To achieve the desired effect you must set the height of "space holder" to the width of "horizontal". Then on scroll you must horizontally translate "horizontal" equal to the offset top of "sticky".
If you're using react then follow the blog post from above. If you want the vanilla javascript version check out this codepen that I made.
I'm developing a scaling web page with three image-based layers of parallax scrolling. Only the first two layers are set up with parallax javascript. The third layer is set at normal scroll speed 0, so it doesn't require any scroll speed modification.
My problem is that when the page is reloaded (on Firefox, at least) when you aren't at the top of the page, those two layers load in the wrong place, but then correct themselves once you start scrolling.
I believe the problem has something to do with the position attribute. Changing to "relative" has the same effect, changing to "fixed" has a similar effect (except on reloading, the layers act like the top of the viewport is the top of the page), and having no position attribute causes them to not be layered and not have a parallax scrolling effect.
This is the javascript I'm using for the parallax effect:
$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*-0.7)+'px');
$('.stairs').css('top',-(scrolled*-0.5)+'px');
}
And here's a simplified version of my page with placeholder graphics on a jfiddle: http://jsfiddle.net/4spur9ch/
You can see what I mean by slightly scrolling down, then right clicking inside the result box, then going to This Frame > Reload Frame
This is the last kink that needs to be worked out before I can continue. Any help would be greatly appreciated.
Edit: It's possible it could have something to do with the 'top' in the javascript, but removing it causes problems.
$(window).scroll(function(e){
parallax();
});
/*Needed to add this line:*/
$(window).trigger("scroll")
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*-0.7)+'px');
$('.stairs').css('top',-(scrolled*0.3)+'px');
}
So as far as I'm concerned, overflow:hidden does hide the scrollbar, but makes it impossible to scroll (at least scrolling doesn't work in Firefox).
I have a scroller-slider on my homepage - it scrolls automaticaly to lower full-screen elements one by one and then comes back to the first element and starts over. It looks really nice in my opinion, but the scrollbar is visible - I would like to make it invisible. With overflow: hidden the scrolling mechanism doesn't work.
Any idea how to do it?
You can hide scrollbar with CSS - wrap your scrollable container into another one with overflow:hidden and less height/width (depending on scroll you want to hide - vertical or horizontal one). This way helps if you have static container/content sizes. If container can be resized or size depends on content - you will have to use JS solution to calculate container size.
I tried sample code in App Dev Center, but the code only can show images side by side and fill all scroll view, I want to realize like attached picture, who can give me some thoughts? Thanks~!
The width of a "page" when you use a paging scroll view is the width of the scroll view itself. So if you want to use that feature, the scroll view must be the width of the pix plus half the width of the borders on either side, so that the next picture will come into place correctly. Now, if you don't want to hide the picture at the right before it's been paged into the scroll view, just don't turn on clipsToBounds.