I'm building a site where the horizontal site submenu "sticks" just under the header as the user scrolls down. The site layout is like this:
[header]
[advert]
[submenu]
[content]
I'm using jquery to determine the submenu+content div position and then adding a class with position: fixed to lock it when it has moved up to cover the ad, and at that point the inner content div containing the site content continues to be scrollable. In Safari and Firefox this is a smooth transition; the user scrolls, the submenu locks, the scrolling continues seamlessly even though it's an inner div that's being scrolled.
In Firefox however, there's a 2-3 second pause when the submenu locks before the content div becomes scrollable again.
Can anyone suggest why, and how to overcome this?
Cheers
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
the question is a bit more complex than the title can describe. I'm trying to make something like this:
There's a one page layout with content sections. Each section is 100vh, some of them are taller. When user scrolls down or swipes an animation occurrs sliding to a next section. When in a taller section user scrolls freely unless at the bounds of the section, then an animation occurrs.
I've come up with an idea that the browser's scrollbar should be something of a controller, that means it should indicate a position value that would be translated by JS to proper animation. I've created a fixed positioned container with the sections over page's body with its height set to the total sections height so the scrollbar indicates proper values.
The problem is I think I don't want the scrollbar to be visible, because it makes a little paradox when dragging it. Also there will be some content sliding in from the side with its own scrollbar. I think I can hide the scrollbar by doing some tricks if the scrollbar is in a div, not window, but it looks like when a fixed container is in a container with a scrollbar the scroll doesn't happen when the mouse is over the fixed container.
So now I'm stuck between having a window scrollbar and not being actually able to scroll over fixed container. I'd appreciate any help so much. Cheers!
some html just for codepen links to work:
<div class="fixed">
<div class="section-container">
<div class="section"><h1>section 1</h1></div>
<div class="section"><h1>section 2</h1></div>
<div class="section"><h1>section 3</h1></div>
</div>
</div>
codepen example with body scroll
codepen example with container scroll
You added scroll before fixed so it doesn't matter if you have scroll or not it is fixed so you cant scroll over fixed area only under.
I have a simple position:fixed sidebar out of the way of page elements. The page scrolls fine, but when I mouse over the fixed sidebar, the page can no longer scroll. Could someone explain why this happens? and how to fix this?
This happens because only the part you hover over scrolls. For example if you create an element with "overflow: scroll", when you over over this element, it will scroll and not the whole page. Same thing is happening over here.
This is my html structure.
section 1 can be scrolled horizontally with li elements
and section 2 can be scrolled vertically.
Before scrolling section2, the section1's scrolling works well.
But, after scrolling section2, and make it like below,
section 1 does not move and all scrolling event goes to section2.
I can't understand why it works like that. (section1's z-index bigger than section2 so always it is on the section2)
the strange thing is it works well at chrome browser on pc.
but on my android browser(HTC evo), the section1 scrolling doesn't work when section2 scrolled to under section1.
Is there anybody explain this?
thanks for reading.
I solved this problem by adding "position: absolute;" on section2. so it can move independently.
Because section2's moving is not affected to section1, the section1's control area did not move.
:)
On ipad there is a css declaration -webkit-overflow-scrolling:touch which provides fast bouncing scroll to any div with cliped content. But it has some differences against native ios scroll:
If it was never scrolled before (eg scrollTop property of parent div is 0) and one is trying to scroll it up, it doesn't bounce but scrolls a whole page up. Same situation for content scrolled to a very bottom and scrolling down.
If content insede scrollable container is smaller then container itself it doesn't bounce too but propogate scrolling to other elements up to the page instead.
Is there any way to make it behave exactly like the native ios scrolling, so touching the container will always scroll it but never the page.