I am having trouble with the scrolling when I use a position:fixed inside of another position:fixed. The simplest way to demonstrate this issue is with this fiddle:
http://jsfiddle.net/xDDJb/
I want to be able to scroll with the mousewheel while having the mouse over the smaller fixed div. I have to keep .wrapper the way it is (aka I cannot remove the position:fixed).
The context is that I'm using Bootstrap 3 modals and I want to essentially create this layout in the modal. The BS .modal class uses position: fixed and creates the same construct as the example's .wrapper.
I would love any suggestions please!
One option could be to use jQuery Mousewheel to catch scroll events on your fixed div and then pass them through. Not elegant, but might do the trick.
Related
How would you make an element go from position:absolute; to position:fixed; when parent is flexbox ?
Let me explain further: I have a very basic layout 100% flexbox based. The layout is just a left sidebar and a content area. In the content area lives a header which starts at 400px from the top and is absolutely positioned (in order to cover a hero section), the desired UX is to make this header sticky after it touches the top of the screen.
Here is a pen for illustration.
Now, I have the mechanism to programatically switch the header from absolute to fixed at a given scroll position, this is not a problem.
The problem is, when fixed:
1. the header covers the scrollbar to the right (real issue)
2. left side of the header has to be known in order to set the left: property (minor issue: I can live with it as my sidebar has a fixed width I can copy from).
I heard about a position:sticky which does the trick, but it seems not that reliable as not really well supported so far.
Of course I cannot know size of the scrollbars as it depends on each navigators... otherwise I would just do right:17px; or something like that. ;)
EDIT
The culprit of the "bug" forcing the header to overlap the scrollbar is the overflow:auto set on #content.
However, as the layout is flexbox based, I don't see how to avoid use of this approach as the sidebar is sticky by definition using basic flexbox. So an underlying question would be: How to stick an element within flexbox, USING FLEXBOX ? The position:fixed is clearly not compatible as it breaks the flow... Also, the obvious step would be to avoid flexbox and redesign the whole layout using classical positioning, but this is out of the purpose: the layout has to be compatible with react-native which ignores classic CSS positioning (uses flexbox only)... See here. (of course, react-native has another way to handle scrolling, hence the problem in web environments).
In order to proceed with my design, I had to make a decision and I went using position:absolute only, but adjusting my top property programatically (using react but could be implemented with Jquery or whatever technology able to know the current scroll position).
In pseudo-code, it would like :
//when scroll reaches 400px
if getScrollTopPostion() > 400
//recalculate top position of given element to equal current Scroll position.
//This gives the effect that the element is sticky. In reality it is just live recalculated...
//Quid of performances?? no idea
then setTop( getScrollTopPostion() )
//otherwise, let the element absolutely positioned at 400
else 400
Obviously, this does NOT answer the initial question.
The "official" answer would be to use position:sticky, but until it gets really spread across say 95% of browsers (particularly mobile ones...), I would say the proper answer is still to be found.
For fixing the 1st issue, try this:
#main #content #header {
position: fixed;
...
}
Remove the overflow: auto; property from #content. And also add align-items:stretch to #sideBar.
I'm looking for ways to make this happen:
A nav bar that is put into a page normally and when it touches the top as I scroll, it fixes there.
You can take this in another way: it's like a fixed nav bar that was not put at the top at first.
It's something like this question where the guy was using js but I want a more easy solution.
I'm using bootstrap and is it possible to use pure css to do this?
If you are using bootstrap, why not just the "Affix" component that is built in?
To more properly answer your question though, no, there isn't a way to do this with CSS alone. Reason being is that CSS is not capable of monitoring scroll position. With javascript its as simple as adding a listener to scroll position of the window, and toggling a class that has a fixed position when it gets to "x" pixels.
I used the following solution to create 3 divs next to each other:
Fluid width with equally spaced DIVs
However, when I wrap each box inside an <a> tag with display:block the entire layout gets funky.
Is there a way around this? The fluidity (is that even a word?) is not really necessary, but preferable. The reason I used it this solution is because it keeps boxes neatly next to each other even in IE6/7 and for the sake of simplicity too.
Thanks in advance!
You cannot wrap a div with a - and if I am understanding you correctly this is where your problems start.
If you want to make your entire div clickable, place a link inside your div around some text/a title/whatever and use jQuery to action this link if you click ANYWHERE inside the div
$(".divClass").click(function () {
window.location = $(this).find("a").attr("href");
});
I have a problem with css overflow property for twitter bootstrap dropdown component with submenus.
When setting max-height and overflow to auto the scrollbar appears in the list as it should, but submenus go inside the drop down list under horizontal scroll, which is not what I need.
Here is the example of this issue.
http://jsfiddle.net/ftMhv/1/
I've tried changing values overflow-x and overflow-y, but none of them worked well.
When using overflow in the matter you described it will hide all children within it. Unfortunately there really is no way around it.
Why do you need a scrolling navigation dropdown? Is it because it is too long?
I would suggest trying a columned approach if that is the case. Have <div>'s within an <li> that have float: left; and then place submenus within them.
Sorry, but I think this is the only answer to your issue.
Edit: You could use javascript and jquery to create a floating absolutely positioned container that displays at the coordinates of the user's mouse. That will probably get pretty hairy and complicated though.
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example